SVG <tspan>元素用于在SVG中繪制多行文本。不必絕對(duì)定位每行文本，該 <tspan>元素使相對(duì)于前一行文本放置一行文本成為可能。該 <tspan>元素還使用戶(hù)可以一次選擇并復(fù)制粘貼幾行文本，而不僅僅是一個(gè)text元素。
這是一個(gè)簡(jiǎn)單的<tspan>示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="20" y="15"> <tspan>tspan line 1</tspan> <tspan>tspan line 2</tspan> </text> </svg>測(cè)試看看?/?
這是結(jié)果圖像：
注意<tspan>結(jié)果如何導(dǎo)致文本行相對(duì)于彼此（彼此之后）定位。
如果希望將線垂直相對(duì)放置，可以使用dy 屬性（delta y）：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="20" y="15"> <tspan>tspan line 1</tspan> <tspan dy="10">tspan line 2</tspan> </text> </svg>測(cè)試看看?/?
現(xiàn)在，由于dy第二個(gè)<tspan>元素的屬性設(shè)置為“ 10” ，因此第二行文本顯示在第一行文本下方10個(gè)像素處 。這是結(jié)果圖像：
如果要將<tspan>元素定位 在絕對(duì)y位置y ，請(qǐng)像對(duì)待<text>元素一樣使用屬性。
如果在dy屬性?xún)?nèi)寫(xiě)入多個(gè)數(shù)字，則每個(gè)數(shù)字都將應(yīng)用于<tspan>元素內(nèi)文本的字符。這是一個(gè)示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="10" y="15"> <tspan dy="5 10 20"> 123 </tspan> </text> </svg>測(cè)試看看?/?
這是生成的圖像。請(qǐng)注意，字形之間的垂直間距現(xiàn)在是如何變化的。
要將文本相對(duì)定位在x軸上，可以使用dx屬性（delta x）。下面的示例顯示了設(shè)置dx為30 的效果。請(qǐng)注意，現(xiàn)在第二行文本相對(duì)于第一行文本的末尾（不是開(kāi)頭）顯示30個(gè)像素：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="20" y="15"> <tspan>tspan line 1</tspan> <tspan dx="30" dy="10">tspan line 2</tspan> </text> </svg>測(cè)試看看?/?
這是結(jié)果圖像：
如果在dx屬性?xún)?nèi)指定多個(gè)數(shù)字，則每個(gè)數(shù)字將應(yīng)用于<tspan>元素內(nèi)的每個(gè)字母。這是一個(gè)示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20"> <tspan dx="5 10 20">123</tspan> </text></svg>測(cè)試看看?/?
這是結(jié)果圖像：
您還可以設(shè)置x屬性以固定文本行的x坐標(biāo)。如果要在彼此下方顯示所有未調(diào)整的行的列表，這將很有用。這是一個(gè)x在三行中設(shè)置為10 的示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text y="20"> <tspan x="10">tspan line 1</tspan> <tspan x="10" dy="15">tspan line 2</tspan> <tspan x="10" dy="15">tspan line 3</tspan> </text> </svg>測(cè)試看看?/?
這是結(jié)果圖像：
可以<tspan>單獨(dú)設(shè)置元素樣式。因此，您可以使用<tspan> 元素來(lái)設(shè)置文本塊的樣式，以使其不同于其余文本。這是一個(gè)示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20"> Here is a <tspan style="font-weight: bold;">bold</tspan> word. </text></svg>測(cè)試看看?/?
這是結(jié)果圖像：
您可以使用baseline-shiftCSS屬性使用<tspan>元素創(chuàng)建上標(biāo)和下標(biāo) 。這是一個(gè)SVG baseline-shift示例，顯示了如何：
<svg width="500" height="100"> <text x="10" y="20"> Here is a text with <tspan style="baseline-shift: super;">superscript</tspan> and <tspan style="baseline-shift: sub;">subscript</tspan> mixed with normal text. </text> </svg>測(cè)試看看?/?
這是生成的圖像。(注意:firefox可能不支持)