The SVG FEOffset.dx property returns the SVGAnimatedNumber object corresponding to the dx component of the FEOffset.dx element.
Syntax:
var a = FEOffset.dx
Return value: This property returns the SVGAnimatedNumber object corresponding to the dx component of the FEOffset.dx 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" >
var g = document.getElementById("gfg");
console.log(g.dx);
console.log("dx value is : ", g.dx.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" >
var g = document.getElementById("gfg");
console.log(g.dx);
console.log("dx value is : ", g.
dx.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer