SVG <feMergeNode> Tag (original) (raw)

Last Updated : 31 Mar, 2022

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

Syntax:

Attributes:

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

Example 1:

html `

SVG Filter

Output:

Example 2:

html `

SVG Filter

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

Output: