SVG <feFlood> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG <feFlood> element generates a layer of continuous color that completely fills this element’s filter primitive region.

Syntax:

<feFlood x="" y="" width="" height=""
 flood-color="" flood-opacity=""/>

Syntax:

• x, y - It defines the x-axis, and y-axis coordinate in the user coordinate system.
• width - The width of the foreignObject.
• height - The height of the foreignObject.
• flood-color - It tells the color of the new layer.
• flood-opacity - It tells the opacity value of the new layer.

Example 1:

Output:

Example 2:

Output: