SVG lengthAdjust屬性用法及代碼示例

lengthAdjust屬性用於決定在textLength屬性定義的長度內文本的拉伸。使用此屬性的元素是<text>，<textPath>，<tref>和<tspan>。

用法:

lengthAdjust = spacing | spacingAndGlyphs

屬性值：lengthAdjust屬性接受上麵提到的和下麵描述的值。

間距：它將調整字形之間的間距，但不會拉伸或擠壓字形本身。
intervalAndGlyphs：它將同時調整字形之間的間距和字形大小。

注意：lengthAdjust屬性的默認值是間距。

下麵的示例說明lengthAdjust屬性的用法。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style:italic; 
            font-weight:bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;  
            margin-left:35px; 
            font-size:25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Stretched with spacing only:- 
            </text> 
  
            <text x="0" y="35" textLength="300" 
                lengthAdjust="spacing"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style:italic; 
            font-weight:bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;  
            margin-left:35px; 
            font-size:25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Stretched with spacing 
                and glyphs:- 
            </text> 
  
            <text x="0" y="35" textLength="300"
                lengthAdjust="spacingAndGlyphs"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html>

輸出：

範例3：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style:italic; 
            font-weight:bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;  
            margin-left:35px; 
            font-size:25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Shrunk with spacing only:- 
            </text> 
  
            <text x="0" y="35" textLength="100"
                lengthAdjust="spacing"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html>

輸出：

範例4：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style:italic; 
            font-weight:bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;  
            margin-left:35px; 
            font-size:25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Shrunk with spacing 
                and glyphs:- 
            </text> 
            <text x="0" y="35" textLength="100"
                lengthAdjust="spacingAndGlyphs"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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