Lichteffekte definieren

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

Bisher wurden die Lichtquellen innerhalb des Filter-Elements <feDiffuseLighting> definiert, das einen diffusen Lichteffekt produziert. Daneben gibt es aber auch noch das Element <feSpecularLighting>. Beide sollen an dieser Stelle näher erläutert werden.

Das Element <feDiffuseLighting> verfügt neben den Universalattributen über folgende Attribute:

  • surfaceScale bestimmt die Höhe und den Winkel der Lichtquelle und damit die Stärke des Schattenwurfs. Sie können sowohl positive als auch negative Werte angeben. Der Standardwert ist 1.
  • diffuseConstant bestimmt die Helligkeit der Lichtquelle. Dafür können Sie positive Werte verwenden. Je höher der Wert, desto heller das Licht. Bei 0 ist kein Licht sichtbar.

Die nachfolgend gezeigten Filter-Definitionen erzeugen nacheinander auf den Kreis aus dem letzten Beispiel angewendet, folgende Ausgabe:

Ergebnisse der definierten feDiffuseLighting-Filter für den Kreis

Abbildung: Die Ergebnisse der definierten feDiffuseLighting-Filter für den Kreis.

Hinweis:
Innerhalb des <feDiffuseLighting>-Elements können Sie nur eine Lichtquelle definieren. Wenn Sie mehrere benötigen, müssen Sie dazu mehrere Licht-Effekte definieren und deren Ergebnisse mit <feComposite> verbinden.

Die zweite Möglichkeit, Lichteffekte zu erstellen, ist der Tag <feSpecularLighting>. Im Gegensatz zum Tag <feDiffuseLighting> erzeugt er aber keinen deckenden, sondern einen transparenten Lichteffekt. Die Stärke der Transparenz hängt von den Einstellungen der Attribute ab. Der Tag unterstützt die folgenden Attribute:

  • surfaceScale bestimmt die Höhe und den Winkel der Lichtquelle und damit die Stärke Schattenwurfs. Sie können sowohl numerische positive als auch negative Werte angeben. Der Standardwert ist 1.
  • specularConstant bestimmt die Helligkeit der Lichtquelle. Dafür können Sie positive Werte verwenden. Je höher der Wert, desto heller das Licht. Bei 0 ist kein Licht sichtbar, der Standardwert ist 1.
  • specularExponent gibt die Stärke der Transparenz für den Lichteffekt an. Je höher der Wert ist, desto transparenter ist der Effekt. Mögliche Werte sind Zahlen zwischen 1 und 128. Der Standardwert ist 1.

Obwohl die Dokumentation nichts dazu aussagt, dass für die Verwendung des Effektes das Filter-Element <feComposite> notwendig ist, haben verschiedene Tests mit dem Adobe SVG-Viewer gezeigt, dass der Effekt nicht angezeigt wird, wenn Sie das Ergebnis nicht mit Hilfe der <feComposite>-Anweisung mit dem Originalbild verschmelzen. Eine korrekte Anzeige auch ohne diesen Tag erhalten Sie nur dann, wenn Sie den Effekt <feSpecularLighting> auf eine externe Grafik anwenden, die Sie über den <image>-Tag in die SVG-Grafik einbinden.

Hinweis:

Sie müssen im Filter-Element <feComposite> das Attribut in nicht angeben. Wenn Sie es wie im Beispiel weglassen, wird automatisch das Ergebnis des vorherigen Filter-Elements verwendet. Sie sparen sich dann auch dort die Angabe des Attributs result.

Ergebnisse der feSpecularLighting-Filter

Abbildung: Ergebnisse der feSpecularLighting-Filter.

   

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