The flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion.
Syntax:
flood-opacity="flood"
Attribute Values:
- flood: A number or percentage indicating the opacity value to use across the current filter primitive subregion
We will use the fill-opacity attribute for setting the opacity of fill-color.
Example 1:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 1000 500"
<filter id="flood1">
<feFlood flood-color="green"
x="40" y="40" width="200"
height="200" />
</filter>
<filter id="flood2">
<feFlood flood-color="green"
flood-opacity="0.3" x="300"
y="40" width="200"
height="200" />
</filter>
<rect x="100" y="100"
width="1000" height="1000"
style="filter: url(#flood1);" />
<rect x="100" y="100"
width="1000" height="1000"
style="filter: url(#flood2);" />
</svg>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 700 500"
<filter id="flood1">
<feFlood flood-color="blue"
x="50" y="50"
width="200"
height="300" />
</filter>
<filter id="flood2">
<feFlood flood-color="blue"
flood-opacity="0.2"
x="300" y="50"
width="200"
height="300" />
</filter>
<rect x="100" y="100"
width="1000"
height="1000"
style="filter: url(#flood1);" />
<rect x="100" y="100"
width="1000"
height="1000"
style="filter: url(#flood2);" />
</svg>
</body>
</html>
|
Output:
