SVG <feMergeNode> Tag

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:

html

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

html

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

Explore