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