Der primitive Filter feMerge
kombiniert mit Hilfe seiner Kind-Elemente feMergeNode
mehrere Input-Bilder zu einem einzigen
Bild. Dabei wird die Porter-Duff-Operation over verwendet.
Die einzelnen Bilder werden also wie Layer übereinandergelegt, wobei das zuerst
angegebene Bild zuunterst und das zuletzt angegebene Bild zuoberst angezeigt wird.
Der Output von primitiven Filtern ist oftmals nur ein Zwischenprodukt, das
nur mit anderen Outputs bzw. anderen Zwischenprodukten vereint, das gewünschte
Ergebnis liefert. Durch die Verwendung von feMerge und
feMergeNode können Sie beliebig viele
Outputs zu einem Bild zusammenfügen. Dies unterscheidet feMerge
von feBlend und feComposite, die
nur zwei Input-Bilder vermischen können.
Das Element feMerge dient als Container-Element.
Innerhalb dieses Containers können Sie beliebig viele Kind-Elemente
feMergeNode platzieren.
Über das Attribut in, das jedem einzelnen
Kind-Element feMergeNode zugeordnet wird,
legen Sie die einzelnen Input-Bilder fest, die dann zu einem einzigen
Bild zusammengefügt werden.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Der primitive Filter feMerge</title>
<desc>
Ein Beispiel für die Verwendung von feMerge
und feMergeNode
</desc>
<defs>
<symbol id="smilie">
<desc>ein lachendes Smilie</desc>
<circle id="gesicht" cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<circle id="auge-links" cx="15" cy="15" r="2"
fill="black" stroke="black" />
<circle id="auge-rechts" cx="25" cy="15" r="2"
fill="black" stroke="black" />
<line id="nase" x1="20" y1="18" x2="20" y2="23"
stroke="black" stroke-width="2" />
<path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
stroke="black" fill="none" stroke-width="2" />
</symbol>
<!-- Filter mit feMerge und feMergeNode -->
<filter id="f1" x="-.3" y="-.3" width="1.8" height="1.8">
<!-- out1: primitive Filter zur Erzeugung eines Hintergrunds -->
<feTurbulence in="SourceGraphic"
baseFrequency=".2" type="fractalNoise"
result="tmp1" />
<feColorMatrix in="tmp1"
type="saturate" values=".1"
result="out1" />
<!-- out2: primitive Filter zur Erzeugung eines Schattens -->
<feGaussianBlur in="SourceAlpha"
stdDeviation="3"
result="tmp2" />
<feOffset in="tmp2"
dx="4" dy="2"
result="out2" />
<!-- out3: primitiver Filter zur "Veränderung" des Smilie -->
<feTurbulence in="SourceGraphic"
baseFrequency=".5" type="turbulence"
result="tmp3" />
<feDisplacementMap in="SourceGraphic" in2="tmp3"
result="tmp3" />
<feMorphology in="tmp3"
operator="dilate" radius=".5"
result="out3" />
<!-- Vermengung der Output-Bilder out1 bis out3 (bedeutet:
Aufeinanderlegen der erzeugenten Layer out1 bis out3
in der angegebenen Reihenfolge). -->
<feMerge>
<feMergeNode in="out1" />
<feMergeNode in="out2" />
<feMergeNode in="out3" />
</feMerge>
</filter>
</defs>
<!-- die Instanz des Symbols "smilie" -->
<use xlink:href="#smilie" transform="translate(15,20) scale(8)"
filter="url(#f1)" />
</svg>
Im einzigen Filter f1 des obigen Beispiels werden
feMerge und feMergeNode
verwendet, um drei Output-Bilder zu vermengen.
Diese drei Output-Bilder, die auch als Layer bezeichnet werden können,
werden also übereinandergelegt. Dabei
überdeckt der jeweils nachfolgende Layer den zuvor
angegebenen, d.h. die Reihenfolge der Layer innerhalb
des feMerge-Containers ist
von großer Bedeutung.
Der erste Layer out1 wird durch den primitiven Filter
feTurbulence in Verbindung mit
feColorMatrix erzeugt.
feTurbulence füllt den Canvas des Zielelements vollständig
mit einem Fraktal. In diesem Output-Bild wird danach
durch feColorMatrix die Farbsättigung vermindert.
Es wird also ein farbverminderters Hintergrundbild erzeugt.
Der zweite Layer out2 beinhaltet
einen durch feGaussianBlur und
feOffset einen Fallschatten (drop shadow).
Im dritten und letzten Layer out3
wird durch feTurbulence
eine Turbulenz erzeugt, die dem folgenden
feDisplacementMap zur
Verschiebung der Pixel des Quellbildes dienen. Das daraus
resultierende leicht gesprenkelte Bild des Smilies wird zuletzt
durch die Verwendung von feMorphology verdünnt.
Zu guter Letzt werden die drei erzeugen Layer
out1 bis out3
durch feMerge und
feMergeNode übereinandergelegt.
|