SVG中的的内容如何换行？

huangk 2006-09-20 11:48:01

<text x="11" y="74" font-size="42" font-family="KaiTi" fill="rgb(128,128,128)" stroke="rgb(248,0,0)" >aaaaaaaaaa
bbbbbbbb</text>

aaaaa与bbbb之间是一个换行符，但是SVG显示的时候仍然把他们显示在同一行上，请问如何实现换行？

...全文

1695 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

woodsmith 2007-04-28

打赏
举报

回复

不能换行

huangk 2006-10-09

打赏
举报

回复

UP

yiyioo 2006-09-20

打赏
举报

回复

http://www.xml.org.cn/dispbbs.asp?boardID=21&ID=20751

IT服务 2006-09-20

打赏
举报

回复

aaaaaaaaaa<br>
bbbbbbbb

svg.textwrap.js 这是库的插件，它覆盖了SVG.Text的默认text和tspan方法，以支持换行。 svg.textwrap.js 根据 MIT 许可条款获得许可。用法在 html 文档中包含 svg.js 后包含此插件。不要忘记指定width行的文本元素的width ，否则不会发生换行。如果使用此插件，则默认情况下所有文本项都将被文本换行。为了避免元素上的文本换行，有两种选择：如果在创建时没有为SVG.Text对象设置width则不会发生换行。如果为给定元素指定了width ，则可以通过{element}.textWrapped({boolean})方法切换该元素的换行。这允许细粒度的文本换行调整和运行时文本换行更新。该插件符合框架，因此指定的所有方法（应该）按预期工作。依赖关系除了 svg.js 本身之外，没有任何依赖项。

d3plus-text 具有换行和自动字体大小缩放功能的智能SVG文本框。正在安装如果使用NPM，则npm install d3plus-text 。否则，请下载。您还可以将d3plus-text作为独立库或一部分进行。支持ES模块，AMD，CommonJS和普通环境。在香草中，将导出d3plus全局d3plus ： < script src =" https://cdn.jsdelivr.net/npm/d3plus-text@1 " > </ script > < script > console . log ( d3plus ) ; </ script > 包装SVG文字毫无疑问，在最常要求的部分模块，它用于智能包装SVG的文本。它的核心是接受包含"text"键的数据点数组，并使用一组默认值将它们添加到页面中。这是一个包含3个要包装的句子的数据数组：

该专题主要分两大部分的内容，一是SVG的知识讲解，二是PowerBI中如何利用SVG来制作一些特殊的图像和可视化效果1. SVG基础介绍2. SVG矩形、圆形和椭圆3. SVG线条和多边形4. SVG文本和图片5. SVG绘制路径6. SVG其他知识7. SVG动画基础8. PowerBI动态控制图标大小和颜色9. PowerBI表格中制作条形图10. PowerBI制作报表水印11. PowerBI图片滚屏效果12. PowerBI中国和省份地图13. PowerBI地图上标记图标14. PowerBI制作三维地图

相信大家都知道在SVG中添加文本是使用text元素。但这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？下面通过这篇文章来给大家详细介绍下实现的过程。

之前小编和大家分享了SVG中如何配合使用text和tspan来实现换行的功能，所以这篇文章对此功能进行一下封装，以后就可以直接用了。有需要的朋友们可以参考借鉴，下面来一起看看吧。

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章