The SVG FEMergeNode.in1 property returns the SVGAnimatedString object corresponding to the in1 component of the FEMergeNode element.
Syntax:
let in_prop = FEMergeNode.in1
Return value: This property returns the SVGAnimatedString object corresponding to the in1 component of the FEMergeNode element.
Example 1:
HTML
<!DOCTYPE html> < html >
< body >
< svg width = "200" height = "200" >
< filter id = "feOffset" x = "-40" y = "-20" width = "100" height = "200" >
< feOffset in = "SourceGraphic" dx = "60" dy = "60" />
< feGaussianBlur stdDeviation = "5" result = "blur2" />
< feMerge >
< feMergeNode in = "BackgroundImage" id = "gfg" />
</ feMerge >
</ filter >
< rect x = "40" y = "40" width = "100" height = "100"
style="stroke: #000000; fill: red;
filter: url(#feOffset);" />
< rect x = "40" y = "40" width = "100" height = "100"
style = "stroke: #000000; fill: red;" />
< script type = "text/javascript" >
let mergeNode = document.getElementById("gfg");
console.log(mergeNode.in1);
console.log("in1 value is : ",
mergeNode.in1.baseVal);
</ script >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html> < html >
< body >
< svg width = "200" height = "200" >
< filter id = "feOffset" x = "-40" y = "-20"
width = "100" height = "200" >
< feOffset in = "FillPaint" dx = "60" dy = "60" />
< feGaussianBlur in = "SourceGraphic" stdDeviation = "5" />
< feMerge >
< feMergeNode in = "BackgroundImage" id = "gfg" />
</ feMerge >
</ filter >
< rect x = "40" y = "40" width = "100" height = "100"
style="stroke: #000000; fill: blue;
filter: url(#feOffset);" />
< rect x = "40" y = "40" width = "100" height = "100" style = "stroke: #000000; fill: red;" />
< script type = "text/javascript" >
let mergeNode =
document.getElementById("gfg");
console.log(mergeNode.in1);
console.log("in1 value is : ",
mergeNode.in1.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer