Der feColorMatrix-Effekt

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Mit dem Filter-Element <feColorMatrix> können Sie Farbänderungen für ein Objekt vornehmen. Dazu definieren Sie eine Matrix, die auf jedes einzelne Pixel des Objekts angewendet wird. Das Filter-Element verfügt neben den Universalattributen noch über die folgenden Attribute:

  • type legt den Typ der Anpassungen fest. Dazu stehen die Werte matrix, saturate, hueRotate und luminanceToAlpha zur Verfügung. Wählen Sie den Typ matrix aus, wird eine 5 x 4 Felder große Matrix verwendet. Alle anderen Einstellungen benutzen nur einen Teil dieser Matrix, um bestimmte Farbwerte zu manipulieren.
  • values legt die Werte der verwendeten Matrix fest. Wie diese Werte aussehen und wie viele es sind, hängt davon ab, welchen Wert Sie für den Parameter type benutzen.

Verwenden Sie type="matrix", dann müssen Sie für values 4 x 5 Werte übergeben, die Sie durch Kommata oder Leerzeichen trennen. Dies entspricht der Matrix:

R'a00 a01 a02 a03 a04R(ot)
G' a10 a11 a12 a13a14G(rün)
B'= a20 a21 a22 a23 a24 * B(lau)
A'a30 a31 a32 a33 a34 A(lpha)
10 0 0 0 11

Sie müssen dazu die Werte wie folgt übergeben: values="a00 a01 a02 a03 a04 a10 a11 a12 ... a34". Ein Beispiel dazu folgt.

Wenn Sie als Typ der Operation saturate ausgewählt haben, übergeben Sie eine einzelnen Nummer, die entweder zwischen 0 oder 1 liegen muss. Prozentwerte sind nicht zulässig. Verwenden Sie den Typ hueRotate, geben Sie ebenfalls nur eine Zahl an. Dies muss allerdings eine ganze Zahl sein, die größer als 0 sein sollte. Bei 0 wird keine Änderung bewirkt. Für den Typ luminanceToAlpha brauchen Sie das Attribut nicht anzugeben, da keine Werte übergeben werden müssen.

Wenn Sie das Attribut values nicht angeben, werden unterschiedliche Default-Werte verwendet. Auch sie hängen vom Wert des Attributs type ab. Alle Default-Werte bewirken allerdings keine Änderung.

Hinweis:
Alle Filtereinstellungen machen in der Regel keinen Sinn, wenn sie auf den Alpha-Kanal einer Grafik angewendet werden, in dem für das Attribut in die Werte SourceAlpha oder BackgroundAlpha verwendet werden.

<filter id="matrix">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 1 1 0 0 0.5 0.5 0.5 0 0 1 1 1 0 0 1 1 1 0 0"/>
</filter>
<filter id="saturate">
  <feColorMatrix in="SourceGraphic" type="saturate" values="0.5"/>
</filter>
<filter id="hueRotate">
  <feColorMatrix in="SourceGraphic" type="hueRotate" values="178"/>
</filter>
<filter id="luminanceToAlpha">
  <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"/>
</filter>

Die zuvor definierten Einstellungen bewirken nacheinander auf die Beispielgrafik angewendet, eine Ausgabe wie in der folgenden Grafik.

Auswirkungen der verschiedenen type- und values-Einstellungen

Abbildung: Auswirkungen der verschiedenen type- und values-Einstellungen.

Wenn Sie die Werte für die Matrix bei type="matrix" berechnen möchten, müssen Sie natürlich etwas über die Bedeutung der Matrix wissen. Dazu folgen an dieser Stelle ein paar Ausführungen für alle diejenigen, deren Mathekenntnisse auch schon etwas zurückliegen. Zur Berechnung des neuen Farbwertes wird, wie oben bereits dargestellt, eine Matrix verwendet. Diese Matrix lautet:

R'a00 a01 a02 a03 a04R(ot)
G' a10 a11 a12 a13a14G(rün)
B'= a20 a21 a22 a23 a24 * B(lau)
A'a30 a31 a32 a33 a34 A(lpha)
10 0 0 0 11

Diese Matrix stellt eine Kurzform dar, die besagt, dass die Werte R' bis A' durch Multiplikation der Werte R bis A mit a00 bis a34 berechnet werden. Dass auf der linken Seite die Ergebnisse stehen, können Sie am Gleichheitszeichen erkennen. Die Art der Berechnung, also Multiplikation, zeigt das * in der vorletzten Spalte an. Die Berechnung erfolgt nach einem ganz bestimmten Schema, das die folgende Abbildung für die Farbe R zeigt. Dazu können Sie gedanklich die aktuellen Farbwerte für R bis A unter die einzelnen Spalten schreiben, R also in die erste Spalte und 1 in die letzte. Dann können Sie die Farbe R bspw. mit folgender Formel berechnen:

R' = a00 * R + a01 * G + a02 * B + a03 * A + a04 * 1

Der neue Farbanteil für Grün berechnet sich dann also mit:

G' = a10 * R + a11 * G + a12 * B + a13 * A + a14 * 1

Berechnung der neuen Farbwerte

Abbildung: Berechnung der neuen Farbwerte.

Die Werte a00 bis a34 stellen letztlich Gewichtungen für die einzelnen Farbanteile dar. Die letzte Zeile (1) dient zum Auffüllen der Matrix, um eine quadratische 5x5-Matrix zu erhalten. Damit ist es dann möglich, die Matrix zu invertieren und die transformierten Farben in die Ursprungsfarben zu konvertieren. Um eine 1:1-Transformation zu erreichen, müssen Sie alle Werte bis auf die diagonalen a00, a11, a22 und a33 auf 0 setzen. Die diagonalen Werte setzen Sie hingegen auf 1.

R'1 0 0 0 0R(ot)
G' 0 1 0 00G(rün)
B'= 0 0 1 0 0 * B(lau)
A'0 0 0 1 0 A(lpha)
10 0 0 0 11

Wenn Sie eine solche Transformation verwenden, sieht das Ergebnis wie die ursprüngliche Grafik aus. Werden alle Werte außer in der letzten Spalte auf 0 gesetzt, führt das zur Farbe Weiß oder einem Grauton, je nach den Werten in der letzten Spalte.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de