SVG 形状内的文本换行答案

【问题标题】：Text Wrap inside SVG ShapeSVG 形状内的文本换行
【发布时间】：2017-08-30 16:38:19
【问题描述】：

我需要将文本包裹在一个形状内。这是我在参考中找到的代码，但它本身不起作用。谁能帮我？

<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2"
         xmlns:xlink="http://www.w3.org/1999/xlink" 
      width="600px" height="400px" viewBox="0 0 300 310">
      <title>Basic textflow</title>
      <rect x="0" y="0" width="100%" height="100%" fill="yellow"/>

  <flowRoot font-size="16" fill="black" color="black">
    <flowRegion>
      <path d="M100,50L50,300L250,300L300,50z"/>
        <flowText>Tomorrow, and tomorrow, and tomorrow; creeps in this 
       petty pace from day to day, until the last syllable of recorded time. 
       And all our yesterdays have lighted fools the way to dusty death.
     </flowText>
    </flowRegion>

  </flowRoot>

  <path d="M90,40L40,270L260,270L210,40z" fill="none" stroke="black" stroke-width="5"/>
</svg>

我的要求：

【问题讨论】：

这来自“从未完成”的 SVG 1.2 完整草案规范。据我所知，只有 Inkscape 实现了它。您需要在 javascript 中通过测量文本并自己拆分来完成。
除了分裂自己还有别的办法吗？我用确切的要求更新了我的问题。让我知道如何摆脱这种情况。
没有。 SVG 目前没有任何自动文本布局元素。否则尝试谷歌搜索 - 也许有人制作了脚本。
试试这个 3 岁的 Example of text split。奇怪的是，HTML 从恐龙时代开始就具有自动文本分割功能，但 SVG 却没有。

标签： svg word-wrap

【解决方案1】：

这不是您想要的答案，但它是我找到的最好的答案。 FireFox 和 Chrome 都支持 foreignObject 标签。有了这个，您可以添加文本。这通常效果很好，但您仅限于以这种方式包装的矩形。 xmlns 属性是必需的。

    <foreignObject  x="225" y="630" width="157" height="125">
     <div class="plain-text"  xmlns="http://www.w3.org/1999/xhtml">
You can put really long lines of text here and they will wrap as you would hope they would. The problem is that Chrome doesn't support <ul><li> tags in side the foreignObject.
     </div>
    </foreignObject>

任何浏览器都不支持所需的流动区域。这是 Stackoverflow 答案的链接，提供了更多详细信息。

Auto line-wrapping in SVG text

【讨论】：