The feMerge filter allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result
attribute and then accessing it in a <feMergeNode>
child.
Usage context
Categories | Filter primitive element |
---|---|
Permitted content | Any number of the following elements, in any order:<feMergeNode> |
Example
Simple Example
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feOffset" x="-40" y="-20" width="100" height="200"> <feOffset in="SourceGraphic" dx="60" dy="60" /> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> <feMerge> <feMergeNode in="blur2" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feOffset);" /> <rect x="40" y="40" width="100" height="100" style="stroke : #000000; fill: green;" /> </svg>
Attributes
Global attributes
Specific attributes
None
DOM Interface
This element implements the SVGFEMergeElement
interface.
Specifications
Specification | Status | Comment |
---|---|---|
Filter Effects Module Level 1 The definition of '<feMerge>' in that specification. |
Working Draft | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<feMerge>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | 4.0 (2.0) | ? | 9.0 | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
The chart is based on these sources.