SVG Tutorial

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

<?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.