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: