SVG形狀文字換行

我需要將文字包裹在形狀中。這是我在參考中找到的代碼，但本身不起作用。誰能幫我？SVG形狀文字換行

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

來源

2014-08-30 srikanth_naalla

，從「永不竣工」 SVG 1.2全面規範草案的。據我所知，只有Inkscape實現它。您需要通過測量文本並自行分割來實現JavaScript。 – 2014-08-30 13:29:20

有沒有其他的方式，而不是分裂自己？我按照確切的要求更新我的問題。讓我知道如何才能出來這個。 – 2014-08-30 13:40:10

編號SVG當前沒有任何自動文本佈局元素。否則，請嘗試使用Google搜索 - 也許有人制作了腳本。 – 2014-08-30 14:24:24

這不是你想要的答案，但它是我找到最好的。 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

來源

2015-02-13 02:20:13

SVG形狀文字換行

回答

相關問題