拉斐尔JS / SVG中的单词换行

Question

你如何在RaphaelJS的盒子里找到文字？或者基于浏览器的SVG一般？

我发现了this thread，但它没有任何意义。他们说要使用“widthToCharNum”，但据我所知，这个帖子是互联网上唯一使用这些词的地方。他们建议使用“宽度”属性，但这没有效果。

Answer 1

文本换行不是内置到 Raphael或SVG规范中。期。来自HTML世界，我发现没有文字包装令人震惊。

但是，你可以自己做，没有太多困难。有关详细信息和示例，请参阅this question。不幸的是，您必须刻录一些客户端周期才能使其动态工作。

Answer 2

svg.js库有一个svg.textflow.js插件。它不是超快但它可以解决问题。它甚至可以在数据属性中存储溢出的文本，因此您可以使用它来创建连续流动的列。 Here the text flow example page

Answer 3

tspan标签可以给出自动换行的错觉，但没有内置的自动换行功能。

tspan标记与文本标记相同，但可以嵌套在文本标记内部和内部。与'dy'属性相结合，这允许SVG 1.1中的自动换行错觉。请注意，'dy'是相对于绘制的最后一个字形（字符）。有关如何在http://tutorials.jenkov.com/svg/text-element.html使用tspan的教程。

http://www.xml.com/pub/a/2002/09/11/quint.html上的文章也可能有用。

Answer 4

我知道它现在有点迟了，但您可能对我的Raphael-paragraph项目感兴趣。

它是一个小型库，允许您创建具有最大宽度和高度约束，行高和文本样式配置的自动包装多行文本。它仍然非常适合beta-ish并且需要大量优化，但它应该适用于您的目的。

GitHub页面上提供了用法示例和文档。