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:
<!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:
Please Login to comment...