Der primitive Filter feColorMatrix
wendet eine Matrix-Transformation auf die RGBA Farb- und Alphawerte
jedes Pixels einer Input-Grafik an und erzeugt auf diese Weise ein
Bild mit veränderten RGBA Farb- und Alphawerten. Es wird also
eine Farbveränderung erzeugt.
Durch das Attribut type legen
Sie die Art der Matrixoperation, d.h. die Art der
Farbveränderung fest. Der voreingestellte Wert für
type ist matrix.
Der Wert matrix benötigt die Angabe einer kompletten
5 x 4 Matrix, d.h. 20 Werte für die 20 neu zu berechnenden Bildpunkte dieser
Matrix, die auf jeden Punkt des Orginalbildes gelegt wird.
Alle weiteren möglichen Werte für das Attribut type
sind Vereinfachungen dieser grundlegenden Matrixoperation, die es
Ihnen erlauben, allgemein gebräuchliche Farboperationen auf weniger komplizierte
Art zu erzeugen. Alle möglichen Werte für type:
-
matix (selbst festzulegende Matrixoperation),
-
saturate (Sättigung),
-
hueRotate (Farbtonänderung) und
-
luminanceToAlpha (Aufhellung des Alphakanals).
Wenn Sie luminanceToAlpha verwenden,
sollten Sie den so erzeugten Output
zusätzlich durch feComposite mit dem Quellbild
vermengen um eine Aufhellung des Originalbildes
(und nicht des Alphakanals) zu erzeugen.
Mit Ausnahme des Wertes luminanceToAlpha benötigen alle
übrigen Werte zusätzliche Angaben. Diese Angaben werden
mit Hilfe des Attributes values vorgenommen. Der Wert für
das Attribut values ist also direkt abhängig vom verwendeten
Wert des Attributes type.
Wenn Sie den Wert matrix für das
Attribut type verwenden,
erhält values folgenden Wert:
eine Liste von 20 Matrix-Werten (zwischen 0 und 1).
Als Beispiel eine zur Originalmatrix identische Matrix:
type: matrix
values:
1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0
Dieser Wert ist in diesem Fall auch der
voreingstellte Wert für values.
Wenn Sie den Wert saturate verwenden,
erhält values folgenden Wert:
genau eine Zahl zwischen 0 und 1.
Ein Beispiel:
type: saturate
values: .3
Der Wert 1 ist in diesem Fall der
voreingstellte Wert für values.
Wenn Sie den Wert hueRotate verwenden,
erhält values folgenden Wert:
eine Ganzahl die eine Gradzahl darstellt (von 0 bis 360).
Ein Beispiel:
type: hueRotate
values: 90
Der Wert 0 ist in diesem Fall der
voreingstellte Wert für values.
Wenn Sie den Wert luminanceToAlpha
für das Attribut type verwenden,
benötigen Sie das Attribut values nicht.
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 feColorMatrix</title>
<desc>
Beispiele für die Verwendung von feColorMatrix
</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:16px;
font-weight:bold;}
]]>
</style>
<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>
<!-- 6 Filter mit feColorMatrix -->
<filter id="f1">
<feColorMatrix type="saturate" values=".3" />
</filter>
<filter id="f2">
<feColorMatrix type="saturate" values=".7" />
</filter>
<filter id="f3">
<feColorMatrix type="hueRotate" values="90" />
</filter>
<filter id="f4">
<feColorMatrix type="hueRotate" values="-90" />
</filter>
<filter id="f5">
<feColorMatrix type="luminanceToAlpha" result="tmp1" />
<feComposite in="SourceGraphic" in2="tmp1"
operator="in" />
</filter>
<filter id="f6">
<feColorMatrix type="matrix"
values="1 0 0 0 0, 0 1 1 1 0, 0 1 1 0 0, 0 0 0 1 0" />
</filter>
</defs>
<!-- die Instanzen des Symbols "smilie" -->
<use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
<use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
filter="url(#f1)" />
<use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
filter="url(#f2)" />
<use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
filter="url(#f3)" />
<use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
filter="url(#f4)" />
<use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
filter="url(#f5)" />
<use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
filter="url(#f6)" />
<!-- Text und Hilfslinien -->
<text x="145" y="130">feColorMatrix</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Das obige Beispiel zeigt die Verwendung alle Arten
von Farbmanipulation durch den primitiven Filter
feColorMatrix.
Die Filter f1 und f2
zeigen Farbveränderungen des Typs saturate und
die Filter f3 und
f4 Farbveränderungen des Typs
hueRotate.
Bei dem Filter f5 wird
der Typ luminanceToAlpha verwendet.
Zusätzlich wird der Filter feComposite
angewandt, um den aufgehellten Alphakanal mit dem
Originalbild zu verschmelzen.
Der Filter f6 zeigt eine Farbveränderung
des Typs matrix.
|