html - SVG 文本元素超出父宽度

Question

因此，我将 SVG 元素的宽度设置为 100%，其中最后一个文本元素的宽度超过了作为其父元素的 SVG 元素的宽度。

我试过使用自动换行并为文本元素设置最大宽度，但无济于事。

基本上，我希望文本元素不会像当前那样脱离父 SVG 元素，并希望单词在到达该父元素宽度的边缘时换行。

此外，我不想只是将文本元素移到左侧，我有意将其放在原处。

<svg height="1000" width="100%">
        <circle cx="50%" cy="50" r=40 stroke="black" stroke-width="2" fill="white"/>
        <text x="49.8%" y="50" font-family="sans-serif" font-size="20px" text-anchor="middle" fill="black" dy=".38em">1939</text>
        <line x1="50%" y1="90" x2="50%" y2="950" style="stroke:black;stroke-width:2"/>
        <text id="first-life-block" x="50%" y="150" font-family="sans-serif" font-size="20px" fill="black" style="word-wrap: normal;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</text>
</svg> 

这是调试器模式下的问题截图

这是我的 Codepen 调试器页面的链接:http://s.codepen.io/edsonmendieta/debug/jqjRry

非常感谢帮助:)

Answer 1

SVG 1.1 doesn't support wrapping of text.

You'd have to manually split it with JavaScript into separate elements or put the text in a <foreignObject> and let it wrap as HTML text.

来自Robert Longson

---

同时检查 this answer到“SVG 文本中的自动换行”和this JSFiddle使用(长)JavaScript 解决方法。