feFlood (SVG Filter Effect)

By mbystedt on Mar 1, 2014, 12:09:07 AM

The flood filter effect is used to fills the filter area with a color. It draws a nice rectangle in the color and opacity picked. The area filled can be set using the x, y, width and height attributes that are common to all filters.

The color to flood. This must be a color and not a paint.
The opacity of the flooded color.
    <filter id="blackFlood" >
      <feFlood flood-color="black" flood-opacity=".5" />
  <filter id="blackFloodMerge" >
    <feFlood flood-color="black" flood-opacity=".5" result="flood" />
      <feMergeNode in="flood" />
      <feMergeNode in="SourceGraphic" />
Example 1. Two flood filter effects. (Download)

See: Filter Effect Common Attributes

There is no live demo as this effect has no options to showcase.

Related Topics