flood-opacity

The flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion.

Note: As a presentation attribute, flood-opacity 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="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/>
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" flood-opacity="0.3" 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 <alpha-value>
Initial value 1
Animatable Yes
<alpha-value>

A number or percentage indicating the opacity value to use across the current filter primitive subregion. A number of 0 or a percentage of 0% represents a fully transparent color, 1 or 100% represents a fully opaque color.

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of 'flood-opacity' in that specification.		 Working Draft Aligned the value to the CSS <alpha-value> value.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'flood-opacity' 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-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/Attribute/flood-opacity