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
Last Updated :
30 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...