xml - SVG 文本自动换行

Question

我想显示一个 <text>在 SVG 中什么会自动换行到容器 <rect>与 HTML 文本填充方式相同 <div>元素。有办法吗？我不想使用 <tspan> 单独定位行

Answer 1

文本换行不是当前实现的规范 SVG1.1 的一部分。

如果您要在 Web 上使用 SVG 图形，您可以通过 <foreignObject/> 在 SVG 中嵌入 HTML。元素。示例:

<svg ...>

<switch>
<foreignObject x="20" y="90" width="150" height="200">
<p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
</foreignObject>

<text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

</svg>

如果您的目标是不支持 HTML 的纯 SVG 渲染器，或者希望您的图形可以使用专业的矢量图形处理软件(Adobe Illustrator、Inkscape 等)进行编辑，则此解决方案可能不适合您。