SVG word-spacing屬性用法及代碼示例

SVG中的word-spacing屬性用於指示單詞之間的間距。可以通過使用屬性的長度值來更改此間距。

如果提到的長度沒有單位標識符，瀏覽器會在當前用戶坐標係中將其作為寬度值進行處理，否則，如果使用單位標識符之一提及長度，則瀏覽器會將其轉換為當前的相應值用戶坐標係。

注意：此屬性可以應用於任何元素，但僅對<altGlyph>，<text>，<textPath>，<tref>和<tspan>元素有效。

用法:

word-spacing ="length"

屬性值：該屬性接受上述和以下描述的單個值：

length:它是一個數字，指定單詞之間的間隔。可以跟著長度單位之一，例如px，cm，mm，pt等。

以下示例說明了word-spacing屬性的用法：

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;  
               text-align:center;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <text y="15" word-spacing="10"> 
            GeeksforGeeks is a Computer  
            Science portal 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;  
               text-align:center;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg"> 
      
        <text x="0" y="40" word-spacing="-10"> 
            GeeksforGeeks is a Computer  
            Science portal 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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