<feFlood>

The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.

Usage context

Categories Filter primitive element
Permitted content Any number of the following elements, in any order:
<animate>, <animateColor>, <set>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGFEFloodElement interface.

Example

HTML Content

<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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
feFlood
Yes
12
Yes
Yes
Yes
?
Yes
Yes
Yes
?
?
Yes
flood-color
Yes
12
Yes
Yes
Yes
?
Yes
Yes
Yes
?
?
Yes
flood-opacity
?
?
?
?
?
?
?
?
?
?
?
?

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood