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 dubugger页面的链接：http://s.codepen.io/edsonmendieta/debug/jqjRry

非常感谢帮助：）

Answer 1

  

SVG 1.1不支持文本换行。

     

您必须使用JavaScript手动将其拆分为单独的元素，或将文本放在<foreignObject>中，然后将其换行为HTML文本。

Robert Longson

同时检查this answer到＆＃34;在SVG文本中自动换行＆＃34;和this JSFiddle使用（长）JavaScript解决方法。