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