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

问题描述

我想在SVG中显示<text>，这将自动换行到容器<rect>，这与HTML文本填充<div>元素的方式相同.有办法吗?我不想使用<tspan> s来稀疏地定位线条.

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 sparately by using <tspan>s.

推荐答案

文本换行不是当前实现的规范SVG1.1的一部分.您应该通过<foreignObject/>元素使用HTML.

Text wrapping is not part of SVG1.1, the currently implemented spec. You should rather use HTML via the <foreignObject/> element.

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

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