文本换行SVG形状

时间:2014-08-30 13:25:25

标签: svg textwrapping

我需要在文本中包装文本。这是我在参考中找到的代码,但它本身不起作用。谁能帮我?

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

我的要求: I need my content to be wrapped in the same way (marked with yellow stroke. FYI: At top I used SVG image mask which is working all well.)

1 个答案:

答案 0 :(得分:0)

这不是你想要的答案,但它是我发现的最好的答案。 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