Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG text-decoration Attribute

  • Last Updated : 05 Nov, 2020

The text-decoration attribute defines whether text is written with a strike-through, overline and/or underline. The main difference between CSS text-decoration property and SVG text-decoration attribute is that, SVG uses the ‘fill‘ and ‘stroke‘ values to paint the text decorations. It has effect only on the following elements <altGlyph>, <text>, <textPath>, <tref>, and <tspan>.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Attribute Values: The text-decoration attribute accepts the values mentioned above and described below

  • text-decoration-line: It sets the text-decoration, to line-through or underline.
  • text-decoration-style: It sets the style of the line used for the decoration, such as solid, wavy, or dashed.
  • text-decoration-color: It sets the color of the decoration.

Example 1: Below examples illustrate the use of text-decoration attribute.



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>

Output:

Example 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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :