The SVG FEDropShadow.stdDeviationX property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEDisplacementMap.stdDeviationX element.
Syntax:
var a = FEDropShadow.stdDeviationX
Return value: This property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEDisplacementMap.stdDeviationX 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>
</g>
<script type="text/javascript">
var g = document.getElementById("gfg");
console.log(g.stdDeviationX)
console.log("stdDeviationX value is : "
, g.stdDeviationX.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.stdDeviationX)
console.log("stdDeviationX value is : ",
g.stdDeviationX.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
