SVG <tspan>元素用于在SVG中繪制多行文本。不必絕對定位每行文本，該 <tspan>元素使相對于前一行文本放置一行文本成為可能。該 <tspan>元素還使用戶可以一次選擇并復制粘貼幾行文本，而不僅僅是一個text元素。
這是一個簡單的<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>測試看看?/?
這是結果圖像：
注意<tspan>結果如何導致文本行相對于彼此（彼此之后）定位。
如果希望將線垂直相對放置，可以使用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>測試看看?/?
現(xiàn)在，由于dy第二個<tspan>元素的屬性設置為“ 10” ，因此第二行文本顯示在第一行文本下方10個像素處 。這是結果圖像：
如果要將<tspan>元素定位 在絕對y位置y ，請像對待<text>元素一樣使用屬性。
如果在dy屬性內(nèi)寫入多個數(shù)字，則每個數(shù)字都將應用于<tspan>元素內(nèi)文本的字符。這是一個示例：
<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>測試看看?/?
這是生成的圖像。請注意，字形之間的垂直間距現(xiàn)在是如何變化的。
要將文本相對定位在x軸上，可以使用dx屬性（delta x）。下面的示例顯示了設置dx為30 的效果。請注意，現(xiàn)在第二行文本相對于第一行文本的末尾（不是開頭）顯示30個像素：
<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>測試看看?/?
這是結果圖像：
如果在dx屬性內(nèi)指定多個數(shù)字，則每個數(shù)字將應用于<tspan>元素內(nèi)的每個字母。這是一個示例：
<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>測試看看?/?
這是結果圖像：
您還可以設置x屬性以固定文本行的x坐標。如果要在彼此下方顯示所有未調(diào)整的行的列表，這將很有用。這是一個x在三行中設置為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>測試看看?/?
這是結果圖像：
可以<tspan>單獨設置元素樣式。因此，您可以使用<tspan> 元素來設置文本塊的樣式，以使其不同于其余文本。這是一個示例：
<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>測試看看?/?
這是結果圖像：
您可以使用baseline-shiftCSS屬性使用<tspan>元素創(chuàng)建上標和下標 。這是一個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>測試看看?/?
這是生成的圖像。(注意:firefox可能不支持)