Related Articles

Related Articles

SVG flood-opacity Attribute
  • Last Updated : 27 Oct, 2020

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

Syntax:

flood-opacity="flood"

Attribute Values:

  • flood: A number or percentage indicating the opacity value to use across the current filter primitive subregion

We will use the fill-opacity attribute for setting the opacity of fill-color.

Example 1: 



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 500" 
        xmlns="http://www.w3.org/2000/svg">
          
        <filter id="flood1">
            <feFlood flood-color="green" 
                x="40" y="40" width="200" 
                height="200" />
        </filter>
  
        <filter id="flood2">
            <feFlood flood-color="green" 
                flood-opacity="0.3" x="300" 
                y="40" width="200" 
                height="200" />
        </filter>
  
        <rect x="100" y="100" 
            width="1000" height="1000" 
            style="filter: url(#flood1);" />
  
        <rect x="100" y="100" 
            width="1000" height="1000" 
            style="filter: url(#flood2);" />
    </svg>
</body>
  
</html>

chevron_right


Output:

Example 2: 

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <body>
        <svg viewBox="0 0 700 500"
             xmlns="http://www.w3.org/2000/svg">
            <filter id="flood1">
                <feFlood flood-color="blue" 
                         x="50" y="50"
                         width="200" 
                         height="300" />
            </filter>
            <filter id="flood2">
                <feFlood flood-color="blue"
                         flood-opacity="0.2" 
                         x="300" y="50"
                         width="200" 
                         height="300" />
            </filter>
  
            <rect x="100" y="100" 
                  width="1000" 
                  height="1000" 
                  style="filter: url(#flood1);" />
            <rect x="100" y="100" 
                  width="1000"
                  height="1000" 
                  style="filter: url(#flood2);" />
        </svg>
    </body>
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :