SVG text-decoration Attribute
Last Updated :
31 Mar, 2022
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:
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"
< 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"
< text x = "0" y = "40"
text-decoration = "line-through" >
GeeksforGeeks
</ text >
</ svg >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...