Opacity (SVG)
The fill-opacity CSS property defines the opacity of the painting operation (color, gradient, pattern, etc.) applied to SVG shapes or text content elements to fill the element. The property defines the opacity of the element's fill only; it does not affect the stroke. If present, it overrides the element's fill-opacity attribute.
Note: The fill-opacity property only applies to <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, and <tspan> elements nested in an <svg>. It doesn't apply to other SVG, HTML, or pseudo-elements.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | ≤15 | 1 | 4 | 18 | 3.2 | |
| Other | ||||||
| The stroke-opacity CSS property defines the opacity of an SVG shape's stroke. The effect is identical to that of opacity, except it is applied only to the stroke, not to the entire element. If present, it overrides the element's stroke-opacity attribute. | 1 | ≤15 | 1.5 | 4 | 18 | 3.2 |
| The fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to a shape. | ≤80 | ≤80 | 1 | ≤13.1 | ≤80 | ≤13.4 |
| The stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to the stroke of a shape. | ≤80 | ≤80 | 1 | ≤13.1 | ≤80 | ≤13.4 |
Syntax
circle {
fill: blue;
fill-opacity: 0.5;
}
path {
stroke: red;
stroke-opacity: 0.8;
}Live demo
Use cases
-
Using Opacity (SVG)
The fill-opacity CSS property defines the opacity of the painting operation (color, gradient, pattern, etc.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.