SVG text-anchor屬性用法及代碼示例

text-anchor屬性用於對齊auto-wrapped或預格式化的文本。環繞區域是由inline-size屬性相對於給定點決定的。如果是多行文本，則為每行進行對齊。它僅對以下元素<altGlyph>，<text>，<textPath>，<tref>和<tspan>有效

用法:

text-anchor = start | middle | end

屬性值：text-anchor屬性接受上麵提到和下麵描述的值：

start:使用此屬性值，字符將對齊，以使文本字符串的開頭位於當前當前文本的初始位置。
middle:使用此屬性值，字符將對齊，以使文本字符串的中間位於當前文本位置。
end:使用此屬性值，字符將被移動，以使最終呈現的文本的結尾位於當前的初始文本位置。

範例1：以下示例說明了text-anchor屬性的用法。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        text { 
            font:20px sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <svg viewBox="0 0 420 420" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <path d="M60 15 L60, 50 M30, 40  
                L90, 40" stroke="green" /> 
          
        <text text-anchor="start" x="60" 
            y="40" stroke="green"> 
            GeeksforGeeks 
        </text> 
          
        <circle cx="60" cy="40" r="3" 
            fill="green" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        text { 
            font:20px sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <svg viewBox="0 0 420 420" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <path d="M60 15 L60, 50 M30,  
            40 L90, 40" stroke="green" /> 
          
        <text text-anchor="middle" x="60"
            y="40" stroke="green"> 
            GeeksforGeeks 
        </text> 
          
        <circle cx="60" cy="40" r="3" fill="green" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例3：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        text { 
            font:20px sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <svg viewBox="0 0 420 420" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <path d="M60 15 L60, 50 M30,  
            40 L90, 40" stroke="green" /> 
          
        <text text-anchor="end" x="60" 
            y="40" stroke="green"> 
            GeeksforGeeks 
        </text> 
          
        <circle cx="60" cy="40" r="3" fill="green" /> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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