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

text-decoration屬性定義是否用strike-through，上劃線和/或下劃線寫文本。 CSS text-decoration屬性和SVG text-decoration屬性之間的主要區別在於，SVG使用“ fill”和“ stroke”值來繪製文本裝飾。它僅對以下元素<altGlyph>，<text>，<textPath>，<tref>和<tspan>有效。

用法:

text-decoration = "text-decoration-line" | "text-decoration-style" 
                 | "text-decoration-color"

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

text-decoration-line：它將text-decoration設置為line-through或帶下劃線。
text-decoration-style：它設置用於裝飾的線條的樣式，例如實線，波浪線或虛線。
text-decoration-color：它設置裝飾的顏色。

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

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:40px;"> 
        GeeksforGeeks 
    </h1> 
  
    <p> 
        Example for text-decoration="underline" 
    </p> 
  
    <svg viewBox="0 0 450 250" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <text y="20" text-decoration="underline"> 
            GeeksforGeeks 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:40px;"> 
        GeeksforGeeks 
    </h1> 
  
    <p> 
        Example for text-decoration="line-through" 
    </p> 
  
    <svg viewBox="0 0 450 250" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <text x="0" y="40" 
            text-decoration="line-through"> 
            GeeksforGeeks 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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