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