Docs4dev
Docs
svg / latest / element / feflood.html

<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>, <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

Specification
Filter Effects Module Level 1
# feFloodElement

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 No Yes Yes Yes No No Yes
flood-color Yes 12 Yes Yes Yes No Yes Yes Yes No No Yes
flood-opacity No No No No No No No No No No No No

See also

© 2005–2023 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