Open In App

SVG FEMergeNode.in1 Property

Last Updated : 30 Mar, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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

Similar Reads