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: