Open In App

SVG <feMergeNode> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The <feMergeNode> SVG element takes the result of another filter which is to be processed by its parent element i.e. feMerge element.

Syntax:

<feMergeNode in="" />

Attributes:

  • in: The in attribute identifies input for the given filter primitive.

Example 1:




<!DOCTYPE html>
<html>
<title>SVG Filter</title>
  
<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" />
                <feMergeNode in=
                    "<filter-primitive-reference>" />
            </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;" />
    </svg>
</body>
  
</html>


Output:

Example 2:




<!DOCTYPE html>
<html>
<title>SVG Filter</title>
  
<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" />
                <feMergeNode in="SourceGraphic" />
            </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;" />
    </svg>
</body>
  
</html


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads