SVG <feFlood> Element

31 Mar, 2022
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:
<!DOCTYPE html><html>  <body>    <svg width="200" height="200">        <defs>            <filter id="filter1"                 filterUnits="userSpaceOnUse">                                  <feFlood x="5%" y="5%" width="198"                 height="118" flood-color="shadow"                 flood-opacity="0.3" />            </filter>        </defs>          <rect x="1" y="1" width="198"             height="118" style="stroke: #000000;                         fill: red;                          filter: url(#filter1);" />          <g fill="#FFFFFF" stroke="Green"             font-size="20" font-family="Verdana">            <text x="28" y="70">GeeksForGeeks</text>        </g>    </svg></body>  </html>
Output:
Example 2:
<!DOCTYPE html><html><title>SVG Filter</title>  <body>    <svg width="200" height="200">        <defs>            <filter id="filter1"                 filterUnits="userSpaceOnUse">                                  <feFlood x="5%" y="5%" width="198"                     height="118" flood-color="green"                     flood-opacity="0.7" />                  <feDiffuseLighting in="BackgroundImage"                     surfaceScale="14" diffuseConstant="2"                     kernelUnitLength="2">                      <feSpotLight x="30" y="20" z="30"                         limitingConeAngle="40"                         pointsAtX="200" pointsAtY="200"                        pointsAtZ="0" />                      <fePointLight x="100" y="80" z="40" />                </feDiffuseLighting>            </filter>        </defs>          <rect x="2" y="1" width="198" height="118"                         style="stroke: #000000;                         fill: green;                        filter: url(#filter1);" />          <circle cx="108" cy="68" r="55" stroke="black"             stroke-width="3" fill="lightgreen"             filter: url(#filter1) />          <g fill="#FFFFFF" stroke="darkGreen"             font-size="12" font-family="Verdana">            <text x="60" y="70">GeeksForGeeks</text>        </g>    </svg></body>  </html>
Output:
HTML-SVG
SVG-Element
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?