SVG Tutorial

Der primitive Filter feComponentTransfer legt für jeden Bildpunkt einer einzelnen Fabe oder des Alphakanals einen neuen Wert fest. Dieser neue Wert wird für jeden Farbkanal und für den Alphakanal durch eine festgelegte mathematische Funktion berechnet. Auf diese Weise sind Veränderungen der Helligkeit, des Kontrast oder der Farbbalance eines Input-Bildes möglich.

feComponentTransfer ist ein Container-Element. Um den Bildpunkten aus jedem Farbkanal und dem Alphakanal einen neuen Wert zuzuordnen, müssen Sie die Kind-Elemente von feComponentTransfer verwenden:

• feFuncR für den roten Farbkanal
• feFuncG für den grünen Farbkanal
• feFuncB für den blauen Farbkanal
• feFuncA für den Alphakanal

Dabei müssen Sie nicht alle Kind-Elemente verwenden. Wenn Sie z.B. den Alphakanal nicht verändern wollen, brauchen Sie das Element feFuncA nicht.
Jedem dieser Kind-Elemente sind die Attribute der Attributgruppe component_transfer_function_attributes zugeordnet. Diese Attribute werden im folgenden erläutert.

type
Voreinstellung: keine.
Mit diesem Attribut legen Sie die Funktion fest, die bei Berechnung des neuen Farbwertes angewendet wird. Der für type verwendete Wert legt die Anwendbarkeit der weiteren Attribute fest. Nachfolgend ein Liste der möglichen Werte, ihrer Bedeutung und der daraufhin anzuwendenden Attribute.

• identity - übernimmt exakt den alten Wert des Bildpunkts.
• table - wendet als Funktion eine Tabellenfunktion (lineare Interpolation) an, deren Werte durch das Attribut tableValues bestimmt werden müssen. Dieser Wert eignet sich gut für Farbveränderungen.
• discrete - wendet eine Treppenfunktion (step function) an, deren Werte ebenfalls durch das Attribut tableValues bestimmt werden müssen. Dieser Wert eignet sich für Farbveränderungen.
• linear - wendet eine lineare Funktion an, deren Steigung durch das Attribut slope und das Attribut intercept bestimmt werden muß. Dieser Wert eignet sich gut für Veränderungen der Helligkeit.
• gamma - wendet eine Exponentialfunktion an, die durch die Attribute amplitude, exponent und offset bestimmt werden muß. Dieser Wert eignet sich gut für Kontrasteinstellungen.

tableValues
Voreinstellung: leer.
Zu verwenden bei den Funktionstypen table und discrete.
Dieses Attribut akzeptiert als Wert eine durch Leerzeichen und/oder getrennt Liste von Zahlen, wie z.B. 0 1 0 0, die als Tabellenwerte für die mathematische Funktion verwendet werden. Eine leere Liste bewirkt eine identische Ausgabe des Bildpunkts.

slope
Voreinstellung: 1.
Zu verwenden beim Funktionstyp linear.
Durch dieses Attribut legen Sie die Steigung bzw. einen Faktor für die lineare Funktion fest. Als Wert ist eine Zahl zu verwenden.

intercept
Voreinstellung: 0.
Zu verwenden beim Funktionstyp linear.
Durch dieses Attribut legen Sie eine Verschiebungwert bzw. einen Summanden für die lineare Funktion fest. Als Wert ist eine Zahl zu verwenden.

amplitude
Voreinstellung: 1.
Zu verwenden beim Funktionstyp gamma.
Durch dieses Attribut bestimmen Sie die Wellenlänge bzw. einen Faktor für die Exponentialfunktion (gamma function). Als Wert ist eine Zahl zu verwenden.

exponent
Voreinstellung: 1.
Zu verwenden beim Funktionstyp gamma.
Durch dieses Attribut bestimmen Sie den Exponenten für die Exponentialfunktion (gamma function). Als Wert ist eine Zahl zu verwenden.

offset
Voreinstellung: 0.
Zu verwenden beim Funktionstyp gamma.
Durch dieses Attribut bestimmen Sie eine Verschiebungswert bzw. einen Summanden für die Exponentialfunktion (gamma function). Als Wert ist eine Zahl zu verwenden.

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 feComponentTransfer</title>
  <desc>
    Beispiele für die Verwendung von feComponentTransfer
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
    ]]>
    </style>
    <linearGradient id="verlauf"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="gray" />
      <stop offset="1" stop-color="yellow" />
    </linearGradient>
    <symbol id="smilie">
      <desc>ein lachendes Smilie</desc>
      <circle id="gesicht" cx="20" cy="20" r="15"
        fill="url(#verlauf)" 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>

<!-- 5 Filter mit feComponentTransfer -->
    <filter id="f1">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="1 1 0 0" />
        <feFuncG type="table" tableValues="0 1 1 0" />
        <feFuncB type="table" tableValues="0 0 1 1" />
      </feComponentTransfer>
    </filter>
    <filter id="f2">
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="1 1 0 0" />
        <feFuncG type="discrete" tableValues="0 1 1 0" />
        <feFuncB type="discrete" tableValues="0 0 1 1" />
      </feComponentTransfer>
    </filter>
    <filter id="f3">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".3" intercept="0" />
        <feFuncG type="linear" slope=".3" intercept="0"  />
        <feFuncB type="linear" slope=".3" intercept="0"  />
      </feComponentTransfer>
    </filter>
    <filter id="f4">
      <feComponentTransfer>
        <feFuncR type="linear" slope="2" intercept="0" />
        <feFuncG type="linear" slope="2" intercept="0"  />
        <feFuncB type="linear" slope="2" intercept="0"  />
        <feFuncA type="linear" slope="1" intercept=".1"  />
      </feComponentTransfer>
    </filter>
    <filter id="f5">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="3" offset="0" />
        <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"  />
        <feFuncB type="gamma" amplitude="2" exponent="3" offset="0"  />
      </feComponentTransfer>
    </filter>
    <filter id="f6">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="6" exponent="3" offset="0" />
        <feFuncG type="gamma" amplitude="6" exponent="3" offset="0"  />
        <feFuncB type="gamma" amplitude="6" exponent="3" offset="0"  />
      </feComponentTransfer>
    </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">feComponentTransfer</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      

Die obige Grafik zeigt Beispiele der verschiedenen Funktionsarten von feComponentTransfer, außer für identity, da bei Verwendung dieses Wertes für das Attribut type innerhalb der einzelnen Kind-Elemente, eine identische Ausgabe erzeugt wird.
Da die Effekte dieses primitiven Filters besser an einem Farbverlauf demonstriert werden können, ist das smilie in diesem Beispiel mit einem solchen gefüllt.

Der Filter f1 verwendet für die Farbkanäle R, G und B den Funktionstyp table als Wert für type, daher wird den jeweiligen Kind-Elementen außerdem das Attribut tableValues mit eine Liste von Zahlwerten zugeordnet.
Die Farbbalance wird verändert.

Der Filter f2 verwendet für die Farbkanäle R, G und B den Funktionstyp discrete als Wert für type, daher wird den jeweiligen Kind-Elementen außerdem das Attribut tableValues mit einer Liste von Zahlwerten zugeordnet.
Die Farbbalance wird stufenweise verändert. Die Farbübergänge gehen verloren.

Der Filter f3 verwendet für die Farbkanäle R, G und B den Funktionstyp linear als Wert für type, daher werden den jeweiligen Kind-Elementen außerdem die Attribute scope und intercept zugeordnet.
Die Helligkeit des Bildes wird nach dunkler verändert.

Der Filter f4 verwendet für die Farbkanäle R, G, B und den Alphakanl ebenfalls den Funktionstyp linear als Wert für type. Auch in diesem Fall werden den jeweiligen Kind-Elementen außerdem die Attribute scope und intercept zugeordnet.
Die Helligkeit des Bildes wird nach heller verändert. Durch Einbeziehung des Alphakanals wird ein hellgrauer Hintergrund erzeugt.

Die Filter f5 und f6 verwenden für die Farbkanäle R, G und B den Funktionstyp gamma als Wert für type, daher werden den jeweiligen Kind-Elementen außerdem die Attribute amplitude, exponent und offset zugeordnet.
Der Kontrast des Bildes wird verändert. Die Leuchtkraft nimmt zu.

Durch verschiedenste Attributwerte innerhalb des primitiven Filters feComponentTransfer bzw. seiner Kind-Elemente können für alle durch type bestimmten Funktionsarten die verblüffensten Resultate erzielt werden.
Test it! :-)