SVG <feDropShadow> Element
Last Updated :
31 Mar, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <feDropShadow> element works in combination with other filter primitives to add a drop shadow to the graphic. It provides a blurred, colored, and optional offset layer behind the original input.
Syntax:
<feDropShadow in="" dx="" dy="" stdDeviation=""/>
Attributes:
- in: It identifies input for the given filter primitive.
- dx, dy: It defines the shift in the position of the element in its respective x, y-axis.
- stdDeviation: It defines the amount of blur applied to the drop shadow. The default value is 0.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "drop_shadow"
filterUnits = "objectBoundingBox"
x = "-50%" y = "-60%" width = "250%"
height = "250%" >
< feDropShadow in = "SourceGraphic"
dx = "1" dy = "1" stdDeviation = "30"
flood-color = "darkgreen" />
</ filter >
</ defs >
< rect x = "40" y = "40" width = "100" height = "100"
style="stroke: #000000;
fill: lightgreen;
filter: url(#drop_shadow);" />
< rect x = "40" y = "40" width = "100" height = "100"
style="stroke: #000000;
fill: lightgreen;
filter: url(#drop_shadow);" />
< g fill = "#FFFFFF" stroke = "black"
font-size = "10" font-family = "Verdana" >
< text x = "50" y = "90" >GeeksForGeeks</ text >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "blur"
filterUnits = "objectBoundingBox"
x = "-10%" y = "-10%" width = "300%"
height = "300%" >
< feDropShadow dx = "18" dy = "10"
stdDeviation = "6"
flood-color = "shadow"
flood-opacity = "2" />
</ filter >
</ defs >
< rect x = "1" y = "1" width = "198"
height = "118" style="stroke: #000000;
fill: green; filter: url(#blur);" />
< circle cx = "100" cy = "60" r = "55"
stroke = "darkgreen" stroke-width = "3"
fill = "Lightgreen"
style = "stroke: filter: url(#blur);" />
< g fill = "#FFFFFF" stroke = "Green"
font-size = "10" c font-family = "Verdana" >
< text x = "60" y = "62" >GeeksForGeeks</ text >
</ svg >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...