Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG <feMergeNode> Tag

  • Last Updated : 15 Oct, 2020

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

Syntax:

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

<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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :