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: