SVG 文本中的自动换行 [英] Auto line-wrapping in SVG text

问题描述

我想在 SVG 中显示一个 什么会自动换行到容器 与 HTML 文本填充相同的方式

元素.有没有办法做到这一点?我不想使用 <tspan>s.

来单独定位行

解决方案

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

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

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

I would like to display a <text> in SVG what would auto-line-wrap to the container <rect> the same way as HTML text fills <div> elements. Is there a way to do it? I don't want to position lines separately by using <tspan>s.

解决方案

Text wrapping is not part of SVG1.1, the currently implemented spec.

In case you are going to use your SVG graphic on the Web, you can embed HTML inside SVG via the <foreignObject/> element. Example:

<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>

If you are targeting a pure SVG renderer without HTML support or want your graphic to be editable using professional vector graphics manipulation software (Adobe Illustrator, Inkscape, ...), this solution will probably not suit you.

这篇关于SVG 文本中的自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！