The SVG FEDropShadow.dy property returns the SVGAnimatedNumber object corresponding to the dy component of the FEDisplacementMap.dy element.
Syntax:
var a = FEDropShadow.dy
Return value: This property returns the SVGAnimatedNumber object corresponding to the dy component of the FEDisplacementMap.dy element.
Example 1:
<!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" id="gfg"/>
</filter>
</defs>
<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>
<script type="text/javascript">
var g = document.getElementById("gfg");
console.log(g.dy)
console.log("dy value is : ",g.dy.baseVal)
</script>
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<defs>
<filter id="blur"
filterUnits="objectBoundingBox"
x="-10%" y="-10%" width="300%"
height="300%">
<feDropShadow in="StrokePaint"
dx="1" dy="1" stdDeviation="30"
flood-color="darkgreen" id="gfg"/>
</filter>
</defs>
<circle cx="110" 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>
<script type="text/javascript">
var g = document.getElementById("gfg");
console.log(g.dy)
console.log("dy value is : ",g.dy.baseVal)
</script>
</svg>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
Reference: https://developer.mozilla.org/en-US/docs/Web/API/SVGFEDropShadowElement