解决Draw.io生成svg矢量图导入Word后换行文本显示为省略号的问题

在使用draw.io画图时,为了最后写成的文档转换成pdf放大不失真,所有图片我都导出为svg。但是当将svg导入Word时,因为Word对svg图片格式支持并不完整,有些文本换行后在Word中只会显示换行前的文本,换行后的会显示为省略号,如下图:

这是我在draw.io中绘制的图形:
原始图形

这是导出的svg在Word中显示的图形:
Word中显示的不完整图形

可以看到,所有换行后的文本都被显示为“...”了,也就是被隐藏了。
但之前画类图的时候,换行文本是可以正常显示的:
类图显示正常

所以应该是文本框的样式出了问题。在状态图中,我的文本框是直接插入的文本框,样式是最基础的默认样式;而类图中的样式是修改过的样式。所以查看一下两个文本框的样式⬇️

  • 如何查看元素样式?右键选中元素,点击编辑样式,或者cmd+E编辑样式

编辑样式

我的普通文本框样式:
普通文本框

我的类图文本框样式:
类图文本框

可以看到二者是不同的,直接将类图文本框的样式复制过来,并应用:

类图文本框样式:text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;

复制并应用

在draw.io中看不出什么变化:
draw.io

但是再次出svg并插入Word文档,可以看到,溢出的换行文本已经被正确显示:
Word

9 声望
0 粉丝
0 条评论
推荐阅读
CSS 如何实现羽化效果?
欢迎关注我的公众号:前端侦探最近碰到这样一个问题,在一张封面上直接显示书名,可能会存在书名看不太清楚的情况(容易受到背景干扰),如下为了解决这个问题,设计师提了一个“究极”方案,将书名背后的图片模糊...

XboxYan11阅读 3k评论 3

封面图
CSS & SVG 绘制写作网格线的3种方式
欢迎关注我的公众号:前端侦探最近有同事问我这样一个问题:需要绘制一个自适应文本的写作网格线,设计稿是这样的其实就是一行行虚线,要求如下虚线的纵向间隔要跟随行高自适应,确保文本在每一栏虚线上虚线后面...

XboxYan7阅读 1.6k

封面图
svg之viewBox
基本语法首先,我在大小为400 x 400的画布中绘制了一个200 x 200的矩形:可以发现,没有问题。现在,我把svg的宽和高改变后:可以看见,等比例变小了。简单的理解就是:viewBox规范了画布的大小,svg标签里面的内...

zxl200707013阅读 484

封面图
CSS、SVG、Canvas对特殊字体的绘制与导出
欢迎关注我的公众号:前端侦探最近在项目中需要对特殊字体进行绘制与导出,如下简单解释一下:所谓绘制,就是视觉上可以看到就行(预览状态),导出呢,就是将看到的转换成图片(或者Canvas),以便于后续处理。...

XboxYan3阅读 955

封面图
SVG 安全
一 目录不折腾的前端,和咸鱼有什么区别目录一 目录二 任务目标三 SVG 简要介绍四 SVG 漏洞认知 4.1 跨站脚本(XSS) 4.2 HTML 注入 4.3 XML 实体导致的 Billion Laughs 攻击 4.4 Dos(拒绝...

jsliang阅读 976

封面图
前端word文件(.docx)预览的VUE组件
开发了一个非常好用的word、excel、pdf预览vue组件,只需提供文件的src地址,或者是文件的ArrayBuffer,即可完成文件预览,非常方便。

蛰伏已久阅读 698

前端js实现docx、xlsx、pdf等类型文件预览VUE组件
都2023年了,怎么文件预览还这么难!发现了问题之后,就想着能不能实现一个简单的VUE组件库,能够解决以上问题,让新手前端,能够非常高效的完成文件预览任务。于是,我期望开发一个vue-office组件库,它必须满足...

蛰伏已久阅读 489

9 声望
0 粉丝
宣传栏