Skip to content
Related Articles

Related Articles

Improve Article

SVG FEMergeNode.in1 Property

  • Last Updated : 09 Dec, 2020

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :