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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。