[[360806]]

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>結果如何導致文本行相對于彼此（彼此之后）定位。

二、定位

1. 垂直定位

如果希望將線垂直相對放置，可以使用dy 屬性（delta y）。現在，由于dy第二個<tspan>元素的屬性設置為“ 10” ，因此第二行文本顯示在第一行文本下方10個像素處。

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

運行效果：

注：

如果要將<tspan>元素定位 在絕對y位置y ，請像對待<text>元素一樣使用屬性。如果在dy屬性內寫入多個數字，則每個數字都將應用于<tspan>元素內文本的字符。

例：

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

運行效果：

注:

字形之間的垂直間距現在是如何變化的。

2. 水平定位

要將文本相對定位在x軸上，可以使用dx屬性（delta x）。

下面的示例顯示了設置dx為30 的效果。

例（請注意，現在第二行文本相對于第一行文本的末尾（不是開頭）顯示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屬性內指定多個數字，則每個數字將應用于<tspan>元素內的每個字母。

例

<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坐標。如果要在彼此下方顯示所有未調整的行的列表，這將很有用。這是一個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>單獨設置元素樣式。因此，可以使用<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>元素創建上標和下標 。

這是一個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可能不支持)

五、總結

本文基于SVG基礎，介紹了有關的元素定位，改變不同的屬性，實現不一樣的位置顯示效果。以及實際項目應用中基線偏移的上標和下標的應用。本文運用豐富的效果圖展示，能夠讓讀者更好的理解。

歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

代碼很簡單，希望對你學習有幫助。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。