Das Filter-Element feComponentTransfer
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Sie können mit dem Filter-Element <feComponentTransfer> einzelne Farbbestandteile der Grafik oder den Alphakanal manipulieren. Dazu müssen Sie innerhalb des Elements weitere untergeordnete Elemente einfügen. Das Element <feComponentTransfer> verfügt über keine Attribute, allerdings gibt es für jedes untergeordnete Element zahlreiche zusätzliche Attribute und auch die Universalattribute können dort verwendet werden. Das Element verfügt über folgende untergeordnete Elemente:
- <feFuncR> ändert die Rot-Komponente der Grafik.
- <feFuncG> ändert die Grün-Komponente der Grafik.
- <feFuncB> ändert die Blau-Komponente der Grafik.
- <feFuncA> ändert den Alpha-Kanal der Grafik.
Alle diese Elemente verfügen über die folgenden Attribute:
- type legt fest, in welcher Weise die Komponente manipuliert werden soll. Dazu stehen die Werte identity, table, discrete, linear und gamma zur Verfügung. Sie bestimmen die Art und Weise, wie die Farbwerte berechnet werden.
Tabelle: Berechnung der Farbe mit den verschiedenen type-Werten.
| Wert für type | Formel zur Berechnung der Farbe | Beschreibung |
|---|---|---|
| identity | C' = C | Es erfolgt keine Veränderung, da die neu berechnete Farbe C' mit der Ursprungsfarbe C übereinstimmt. |
| table | k/N <= C < (k+1)/N => C' = vk + (C - k/N)*N * (vk+1 - vk) | Beim Wert table müssen Sie eine Tabelle mit Werten angeben, die als v1 bis vk bezeichnet werden. N stellt die Anzahl der Tabellenwerte dar. |
| discrete | k/N <= C < (k+1)/N => C' = vk | Auch hier müssen Tabellenwerte angegeben werden, die als v1 bis vk bezeichnet werden. N stellt die Anzahl der Tabellenwerte dar. |
| linear | C' = slope * C + intercept | Wenn Sie den Wert linear verwenden, wird die Farbe durch lineare Interpolation berechnet. Dabei stellt slope die Steigung der Geraden dar und wird durch ein gleichnamiges Attribut festgelegt. Auch den Wert intercept müssen Sie über ein Attribut bestimmen. |
| gamma | C' = amplitude * (C exponent) + offset | Beim Typ gamma werden die Werte mit Hilfe einer Kurvenfunktion berechnet. Dazu geben Sie die Werte amplitude, exponent und offset ebenfalls als Attribute an. |
- tableValues bestimmt die Werte, die verwendet werden, wenn Sie table oder discrete als Wert für type angeben. Die Werte geben Sie einfach nacheinander getrennt durch Leerzeichen oder Kommata an. Wenn Sie das Attribut nicht angeben, wird eine leere Liste verwendet. Das bedeutet, dass keine Veränderung durchgeführt wird.
- slope bestimmt bei Auswahl von type="linear" die Steigung der linearen Funktion, mit der die Farbe berechnet wird. Wenn Sie dieses Attribut nicht angeben, wird der Wert 1 verwendet. Die Berechnung der Farbe erfolgt hier mit der Formel: C' = slope * C + intercept.
- intercept bestimmt den Wert für die Variable intercept in der Formel zur linearen Berechnung. Geben Sie diesen Wert nicht an, wenn Sie type="linear" benutzen, wird 0 als Wert verwendet. Der Wert muss zwischen 0 und 1 liegen.
- amplitude bestimmt dem Wert amplitude der gamma-Funktion. Geben Sie den Wert nicht an, wird der Standardwert 1 verwendet.
- exponent legt den Exponenten in der Formel für die gamma-Funktion fest. Auch hier ist 1 der Standardwert, der verwendet wird, wenn Sie das Attribut nicht angeben.
- offset legt den Wert offset in der gamma-Funktion fest.
<filter id="identity">
<feComponentTransfer in="SourceGraphic">
<feFuncR type="identity" />
<feFuncG type="identity" />
<feFuncB type="identity" />
<feFuncA type="identity" />
</feComponentTransfer>
</filter>
<filter id="table">
<feComponentTransfer in="SourceGraphic">
<feFuncR type="table" tableValues="0.3 -5 6" />
<feFuncG type="table" tableValues="-0.3 5 -2" />
<feFuncB type="table" tableValues="1 2.3" />
<feFuncA type="identity" />
</feComponentTransfer>
</filter>
<filter id="discrete">
<feComponentTransfer in="SourceGraphic" >
<feFuncR type="discrete" tableValues="0.3 -5 6"/>
<feFuncG type="discrete" tableValues="0.3 -5 6"/>
<feFuncB type="discrete" tableValues="0.3 -5 6"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
<filter id="linear">
<feComponentTransfer in="SourceGraphic" >
<feFuncR type="linear" slope="-0.7" intercept="0.2"/>
<feFuncG type="linear" slope="2" intercept="0.8"/>
<feFuncB type="linear" slope="1.5" intercept="0.2"/>
<feFuncA type="identity" />
</feComponentTransfer>
</filter>
<filter id="gamma">
<feComponentTransfer in="SourceGraphic" >
<feFuncR type="gamma" amplitude="1" exponent="1.5" offset="-0.5"/>
<feFuncG type="gamma" amplitude="3" exponent="2.5" offset="1" />
<feFuncB type="gamma" amplitude="1" exponent="0.5" offset="0"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
Abbildung: Das Ergebnis des Filterelements feComponentTransfer.
Hinweis:
Sie können natürlich für die untergeordneten Elemente auch verschiedene Methoden für das type-Attribut wählen.
| << 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