<feMerge>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das <feMerge> SVG Element ermöglicht es, Filtereffekte gleichzeitig anstelle von sequenziell anzuwenden. Dies wird erreicht, indem andere Filter ihre Ausgabe über das result Attribut speichern und diese dann in einem <feMergeNode> Kind abgerufen wird.
Wie andere Filter-Primitiven, verarbeitet es Farbkomponenten standardmäßig im linearRGB Farbraum. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu nutzen.
Verwendungskontext
| Kategorien | Primitives Filterelement |
|---|---|
| Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:<feMergeNode> |
Attribute
DOM-Schnittstelle
Dieses Element implementiert die SVGFEMergeElement Schnittstelle.
Beispiel
SVG
html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <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="blur2" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <rect x="40" y="40" width="100" height="100" stroke="black" fill="green" filter="url(#feOffset)" /> </svg> Ergebnis
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # feMergeElement |
Browser-Kompatibilität
Siehe auch
- SVG-Filterprimitiven-Attribute
flood-colorAttributflood-opacityAttribut<filter><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feImage><feMergeNode><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence>- SVG-Tutorial: Filtereffekte