-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
100 lines (81 loc) · 2.83 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
95
96
97
98
99
100
---
title: opacity
slug: Web/SVG/Attribute/opacity
page-type: svg-attribute
browser-compat: svg.global_attributes.opacity
---
{{SVGRef}}
The **`opacity`** attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.
> [!NOTE]
> As a presentation attribute, `opacity` can be used as a CSS property. See the CSS {{cssxref("opacity")}} property for more information.
You can use this attribute with the following SVG elements:
- {{SVGElement("a")}}
- {{SVGElement("circle")}}
- {{SVGElement("ellipse")}}
- {{SVGElement("foreignObject")}}
- {{SVGElement("g")}}
- {{SVGElement("image")}}
- {{SVGElement("line")}}
- {{SVGElement("marker")}}
- {{SVGElement("path")}}
- {{SVGElement("polygon")}}
- {{SVGElement("polyline")}}
- {{SVGElement("rect")}}
- {{SVGElement("svg")}}
- {{SVGElement("switch")}}
- {{SVGElement("symbol")}}
- {{SVGElement("text")}}
- {{SVGElement("textPath")}}
- {{SVGElement("tspan")}}
- {{SVGElement("use")}}
Unlike {{SVGAttr("fill-opacity")}}, {{SVGAttr("stroke-opacity")}}, and {{SVGAttr("stop-opacity")}}, which are applied to individual operations and are rendered _when_ the element is rendered, `opacity` is applied to whole objects or groups, and is more like a post-processing operation on the rendered image of the object or group. Therefore, when you have both `opacity` and the other opacity attributes in the same area, they will be overlaid on top of each other and cause the opacity to be multiplied.
## Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
<stop offset="0%" style="stop-color:skyblue;" />
<stop offset="100%" style="stop-color:seagreen;" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
<circle cx="50" cy="50" r="40" fill="black" />
<circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>
```
{{EmbedLiveSample("Example", "200", "200")}}
## Usage notes
<table class="properties">
<tbody>
<tr>
<th scope="row">Default value</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Value</th>
<td><code><alpha-value></code></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
- `<alpha-value>`
- : The uniform opacity setting to be applied across an entire object, as a {{cssxref("number")}}. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("opacity")}}
- {{SVGAttr("fill-opacity")}}
- {{SVGAttr("stop-opacity")}}
- {{SVGAttr("stroke-opacity")}}