SVG FEOffset.dy Property
The SVG FEOffset.dy property returns the SVGAnimatedNumber object corresponding to the dy component of the FEOffset element.
Syntax:
let offset_prop = FEOffset.dy
Return value: This property returns the SVGAnimatedNumber object corresponding to the dy component of the FEOffset element.
Example 1:
HTML
<!DOCTYPE html> < html > < body > < svg width = "400" height = "400" > < defs > < filter id = "filter2" x = "0" y = "0" width = "150%" height = "150%" > < feOffset result = "offOut" dx = "30" dy = "30" in = "SourceGraphic" id = "gfg" /> < feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" /> </ filter > </ defs > < g > < rect x = "50" y = "50" width = "150" height = "150" stroke = "black" stroke-width = "5" fill = "gray" filter = "url(#filter2)" /> </ g > < script type = "text/javascript" > let feoffset = document.getElementById("gfg"); console.log(feoffset.dy) console.log("dy value is : ", feoffset.dy.baseVal) </ script > </ svg > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html > < body > < svg width = "400" height = "400" > < defs > < filter id = "filter2" x = "0" y = "0" width = "150%" height = "150%" > < feOffset result = "offOut" dx = "30" dy = "30" in = "SourceGraphic" id = "gfg" /> < feGaussianBlur in1 = "blurOut" in = "offOut" stdDeviation = "10" /> < feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" /> </ filter > </ defs > < g > < rect x = "50" y = "50" width = "150" height = "150" fill = "gray" filter = "url(#filter2)" /> </ g > < script type = "text/javascript" > let feoffset = document.getElementById("gfg"); console.log(feoffset.dy) console.log("dy value is : ", feoffset.dy.baseVal) </ script > </ svg > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer