SVG <feFlood> Filter

Last Updated:

What is <feFlood> Filter?

The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110"> <defs> <filter id="point" filterUnits="userSpaceOnUse"> <feFlood x="5" y="5" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use filter="url(#point)"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
flood-color Specifies what color to use to flood the current filter primitive subregion defined through the <feFlood> element.
flood-opacity Specifies the opacity value to use across the current filter primitive subregion defined through the <feFlood> element.

Share this Page

Meet the Author