flood-color

The flood-color attribute indicates what color to use to flood the current filter primitive subregion.

Note: As a presentation attribute, flood-color can be used as a CSS property.

You can use this attribute with the following SVG elements:

Example

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood flood-color="skyblue" x="0" y="0" width="200" height="200"/>
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" x="0" y="0" width="200" height="200"/>
  </filter>

  <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" />
  <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translateX(220px);" />
</svg>

Usage notes

Value color
Initial value black
Animatable Yes

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of 'flood-color' in that specification.		 Working Draft Removed the <icccolor> value and aligned the value to the CSS color value.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'flood-color' in that specification.		 Recommendation Initial definition

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
flood-color
?
?
?
?
?
?
?
?
?
?
?
?

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/Attribute/flood-color