SVG <tspan>用法及代碼示例

SVG代表可縮放矢量圖形。它可以像HTML畫布一樣用於製作圖形和動畫。

SVG <tspan>元素在<text>元素或另一個<tspan>元素內定義子文本。它允許根據用戶需要調整該子文本的樣式和/或位置。

用法:

<tspan attributes="" >
    Subtext
</tspan>

屬性：

x:字形的x軸坐標。
y:字形的y軸坐標。
dx:沿x軸移動。
dy:沿y軸移動。
rotate:字形的旋轉。
textlength:呈現文字的長度。
lengthAdjust:調整呈現的長度。

範例1：

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 400 400" 
         xmlns="http://www.w3.org/2000/svg"> 
        <style> 
            tspan { font:bold; fill:green; } 
        </style> 
  
        <text x="10" y="30" class="small"> 
            <tspan>GeekforGeeks</tspan>:  
       Computer Science Portal for Geeks! 
        </text> 
  
    </svg> 
</body> 
  
</html>

輸出：

範例2：淡化矩形的顏色

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 400 400" 
         xmlns="http://www.w3.org/2000/svg"> 
        <style> 
            tspan { fill:green; font:bold 40px sans-serif;} 
        </style> 
  
        <text x="10" y="30" class="small"> 
            This is <tspan>Large</tspan> Text 
        </text> 
  
    </svg> 
</body> 
  
</html>

輸出：

支持的瀏覽器：此SVG元素支持以下瀏覽器：

穀歌瀏覽器
IE瀏覽器
Firefox
蘋果Safari
Opera

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 SVG <tspan> element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。