Kombinierende Filter
<< < > >> > Hauptteil > Elemente > zur Darstellung > Filter > kombinierende

Die Filter auf dieser Seite kombinieren auf verschiedene Art und Weise zwei Bilder miteinander. Diese Filter werden gerne benutzt, um die Ergebnisse anderer Filter zusammen zu führen und dadurch dann auch erst den komplexeren, gewünschten Effekt hervorzurufen. So einen komplexeren Effekt wird das Beispiel am Ende des Filter-Kapitels vorstellen.

Der Filter <feBlend> kombiniert zwei Input-Grafiken. Er benutzt dazu die üblichen Blend-Modi aus Grafikprogrammen: normal, multiply, screen, darken, lighten. Dabei werden die Inputgrafiken pixelweise verschmolzen, die Farbwerte der jeweils zwei Pixel werden addiert oder multipliziert oder es wird der dunklere oder hellere Farbwert als Ergebnis gewählt.

Die nötigen Angaben sind die Attribute mode, in dem der Blend-Modus angegegen wird (in der Form, wie sie oben beschrieben wurden), in und in2 beinhalten die Referenzen auf die zwei Inputgrafiken. Das Beispiel 33 zeigt anschaulich wie der Hintergrund mit der Schrift im Vordergrund geblendet wird und jeder der Modi wird dargestellt. Hierbei soll noch einmal darauf hingewiesen werden, dass wenn als Referenz bei in oder in2 der Wert "backgroundImage" angegegeben wird, die Elemente, die dazu gehören sollen, alle das Attribut enable-background="new" belegt haben müssen.

Der Filter <feComposite> kombiniert ebenfalls zwei Input-Grafiken (anzugeben wieder in den Attributen in und in2) pixelweise, benutzt dazu aber die Porter-Duff Kompositions-Operatoren over, in, atop, out und xor. Dabei werden die Farbwerte der zwei Bilder nicht gemischt, sondern je nach dem, welcher Operator über das Attribut operator angegeben ist, wird der Farbwert des Pixels einer der beiden Bilder gewählt. Das Beispiel 34 zeigt wieder einmal die Wirkung der einzelnen Operatoren: Der Wert "over" bedeutet, dass die nichttransparenten Teile der Grafik in (also der Stern) über der Grafik in2 liegen. Der Wert "in" bewirkt, dass nur (!) die Teile der in-Grafik angezeigt werden, die an den nichttransparenten Stellen der in2-Grafik (den blauen Streifen) liegen. Der Wert "out" ist das Pedant zu Wert "in", hier sieht man nur die Teile des Sterns, die an den transparenten Stellen der Streifen-Grafik liegen. Übereinander würden das Ergebnis des "in"- und des "out"-Composite wieder den kompletten Stern ergeben. Der Wert "atop" bedeutet, dass an den nichttransparenten Stellen der Grafik in2 (den blauen Streifen), beide Grafiken gezeichnet werden (in über in2 gelegen), und an den transparenten Stellen gar nichts. Der Wert "xor" bewirkt, dass an den transparenten Stellen der einen Grafik die andere Grafik gezeichnet wird und an den nichttransparenten Stellen eben nicht. Der fünfte mögliche Wert ist "arithmetic" und etwas komplexer. Dieser bewirkt als Einziger eine Vermischung der Farbwerte der übereinanderliegenden Pixel. Wie diese Farbwerte gemischt werden, wird über die Attribute k1, k2, k3, k4 geregelt. Das Resultat berechnet sich wie folgt: result = k1*i1*i2 + k2*i1 + k3*i2 + k4.

Den gleichen Effekt wie der <feComposite>-Filter mit dem Operator "over" hat der Filter <feMerge>; der Unterschied ist, dass dieser Filter beliebig viele Grafiken übereinander legen kann. Bei komplexeren Filtern, die aus vielen Filterprimitiven bestehen, wird am Ende gerne <feMerge> benutzt, um auf übersichtliche Art die Resultate vieler Filter zu einem zu binden. <feMerge> selber hat keine Attribute, die Grafiken, die übereinander gelegt werden sollen, werden jeweils in einem <feMergeNode>-Element, das ein Child von <feMerge> sein muss, über das Attribut in referenziert. Dabei wird das erste Child die unterste Grafik sein. Das Beispiel auf der nächsten Seite benutzt unter anderem <feMerge>.