-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
94 lines (74 loc) · 2.4 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
---
title: text-decoration
slug: Web/SVG/Attribute/text-decoration
page-type: svg-attribute
browser-compat: svg.global_attributes.text-decoration
---
{{SVGRef}}
The **`text-decoration`** attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the {{cssxref("text-decoration-line")}} and {{cssxref("text-decoration-style")}} properties.
The fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared.
The paint order of the text decoration, i.e. the fill and stroke, is determined by the value of the {{SVGAttr("paint-order")}} attribute at the point where the text decoration is declared.
> [!NOTE]
> As a presentation attribute, `text-decoration` can be used as a CSS property. See the CSS {{cssxref("text-decoration")}} property for more information.
You can use this attribute with the following SVG elements:
- {{SVGElement("text")}}
- {{SVGElement("textPath")}}
- {{SVGElement("tref")}}
- {{SVGElement("tspan")}}
## Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">
<text y="20" text-decoration="underline">Underlined text</text>
<text x="0" y="40" text-decoration="line-through">Struck-through text</text>
</svg>
```
{{EmbedLiveSample("Example", "250", "100")}}
## Usage notes
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<code
><a href="/en-US/docs/Web/CSS/text-decoration-line"
><'text-decoration-line'></a
></code
>
||
<code
><a href="/en-US/docs/Web/CSS/text-decoration-style"
><'text-decoration-style'></a
></code
>
||
<code
><a href="/en-US/docs/Web/CSS/text-decoration-color"
><'text-decoration-color'></a
></code
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td>See individual properties</td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
For a description of the values, please refer to the [CSS `text-decoration`](/en-US/docs/Web/CSS/text-decoration#values) property.
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("text-decoration")}}