This example demonstrates the basic use case of flood-opacity, and how the CSS flood-opacity property takes precedence over the flood-opacity attribute.
HTML
We have an SVG with a few <filter> elements, each with a <feFlood> child. The <feFlood> define the filters as seagreen, with the first being declared by its flood-opacity attribute as fully opaque and the second being fully transparent. We included two <rect> elements, each with a filter attribute.
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood flood-color="seagreen" flood-opacity="1" />
</filter>
<filter id="flood2">
<feFlood flood-color="seagreen" flood-opacity="0" />
</filter>
<rect id="r1" filter="url(#flood1)" />
<rect id="r2" filter="url(#flood2)" />
</svg>
CSS
We define the height, width, x, and y,positioning of our rectangles with CSS, and include a repeating linear gradient as a background-image on the SVG so the opacity of the flood-color is more apparent:
svg {
background-image: repeating-linear-gradient(
45deg,
transparent 0 9px,
#ccc 0px 10px
);
}
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
We then apply different flood opacity values to the <feFlood> elements using the CSS flood-opacity: property:
#flood1 feFlood {
flood-opacity: 0.5;
}
#flood2 feFlood {
flood-opacity: 90%;
}
Results
The attributes defined the first square as fully opaque and the second as fully transparent, but these values were overridden by the CSS flood-opacity values. The seagreen filters are 50% and 90% opaque, respectively.