<feFlood>
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 <feFlood>
SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color
and flood-opacity
.
Usage context
Attributes
DOM Interface
This element implements the SVGFEFloodElement
interface.
Example
HTML
html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<filter id="floodFilter" filterUnits="userSpaceOnUse">
<feFlood
x="50"
y="50"
width="100"
height="100"
flood-color="green"
flood-opacity="0.5" />
</filter>
</defs>
<use style="filter: url(#floodFilter);" />
</svg>
Result
Specifications
Specification |
---|
Filter Effects Module Level 1 # feFloodElement |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
See also
- SVG Filter primitive attributes
<filter>
<animate>
<set>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
- SVG tutorial: Filter effects