svg 文本換行

SVG 的強大能力之一是它可以將文本控制到標準 HTML 頁面不可能有的程度，而無須求助映像或其它外掛程式（後者會帶來可訪問性挑戰）。任何可以在形狀或路徑上執行的操作（如繪製或濾鏡）都可以在文本上執行。

　　一個不足之處是 SVG 不執行自動換行。如果文本比允許空間長，則簡單地將它切斷。多數情況下，建立多行文本需要多個文本元素。

　　可以使用 tspan 元素將文本元素分成幾部分，允許每部分有各自的樣式。在 text 元素中，空格的處理與 HTML 類似；換行和斷行符號變成空格，而多個空格壓縮成單個空格，如下面的早期樣本所示：

 

 

<g>

<text x="20" y="50" font-size="30">
Colors can be specified
</text>
<text x="20" y="100" font-size="30">by their
<tspan fill="rgb(255,0,0)">R</tspan>
<tspan fill="rgb(0,255,0)">G</tspan>
<tspan fill="rgb(0,0,255)">B</tspan>
values</text>
<text x="20" y="150" font-size="30">
or by keywords such as
</text>
<text x="20" y="200" font-size="30">
<tspan fill="lightsteelblue">lightsteelblue</tspan>,
</text>
<text x="20" y="250" font-size="30">
<tspan fill="mediumseagreen">mediumseagreen</tspan>,
</text>
<text x="20" y="300" font-size="30">and
<tspan fill="darkorchid">darkorchid</tspan>.
</text>

</g>