flood-opacity
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion.
Note:
As a presentation attribute, flood-opacity also has a CSS property counterpart: flood-opacity. When both are specified, the CSS property takes priority.
You can use this attribute with the following SVG elements:
Example
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood
flood-color="seagreen"
flood-opacity="1"
x="0"
y="0"
width="200"
height="200" />
</filter>
<filter id="flood2">
<feFlood
flood-color="seagreen"
flood-opacity="0.3"
x="0"
y="0"
width="200"
height="200" />
</filter>
<rect x="0" y="0" width="200" height="200" filter="url(#flood1)" />
<rect x="220" y="0" width="200" height="200" filter="url(#flood2)" />
</svg>
Usage notes
| Value | <alpha-value> |
|---|---|
| Initial value | 1 |
| Animatable | Yes |
<alpha-value>-
A number or percentage indicating the opacity value to use across the current filter primitive subregion. A number of
0or a percentage of0%represents a fully transparent color,1or100%represents a fully opaque color.
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # FloodOpacityProperty |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flood-opacity
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- CSS
flood-opacityproperty flood-color