feFlood element | SVGFEFloodElement object

Creates a rectangle with specified color and opacity values.

Scalable Vector Graphics: Filter Effects, Section 15.25.18

Syntax


<feFlood flood-color="colorvalue" flood-opacity="opacityvalue"/>

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGFEFloodElement

Members

The SVGFEFloodElement object has these types of members:

Properties

Properties

The SVGFEFloodElement object has these properties.

Property	Access type	Description
height		Gets or sets the height of an element.
result	Read-only	Provides a reference for the output result of a filter.
width		Defines the width of an element.
x		Gets or sets the x-coordinate value.
y		Gets or sets the y-coordinate value.

Standards information

Scalable Vector Graphics: Filter Effects, Section 15.25.18

Remarks

The purpose of this filter is to provide a rectangular area that can be part of a larger filter chain. If you do not supply a color or opacity, the default values will be used. You can supply the x, y, width, and height values, but if you do not, they will be defined by the general filter region.

Examples

This example shows a simple flood filter that is green colored and has an opacity of 50%.

The image will look like this.


<!DOCTYPE HTML>
<html>
    
    <head>
    </head>
    
    <body>
        <svg width="400" height="400">
        
            <defs>
               <filter id="MyFilter" filterUnits="userSpaceOnUse" 
                 x="0" y="0"  width="400" height="400">
                  <feFlood x="100" y="100" width="100" height="100" 
                    flood-color="green" flood-opacity="0.5"/>
               </filter>
            </defs>
            <use filter="url(#MyFilter)" x='0' y='0'/>				
            </svg>
    </body>

</html>