Das Element feGaussianBlur

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

Mit dem Filter-Element <feGaussianBlur> können Sie Schatten erzeugen. Sie haben ihn bereits mehrfach verwendet, allerdings muss das Attribut stdDeviation noch näher erläutert werden. Es bestimmt, wie stark das Objekt verwischt wird, wie weich also der Rand gezeichnet wird. Sie können dazu wahlweise einen oder zwei numerische Werte übergeben. Wenn Sie nur einen Wert angeben, bestimmt dieser die Verwischung auf beiden Achsen. Geben Sie zwei Werte an, wird der erste für den Effekt auf der x-Achse und der zweite für den Effekt auf der y-Achse verwendet.

Auch der Wert für das Attribut in spielt eine große Rolle für das Aussehen des Schattens. Verwenden Sie SourceAlpha, wird ein Schatten vom Alpha-Kanal erzeugt, bei Verwendung von SourceGraphic erhalten Sie einen Schatten des ganzen Objekts. Beachten Sie jedoch, dass der Filter in der Regel nur zusammen mit anderen Filtern eingesetzt werden kann, da er nur den Schatten selbst erzeugt, aber nicht das Element, auf das der Filter angewendet wird, mit einem Schatten versieht.

Das folgende Beispiel erzeugt zunächst drei Schatten mit den Werten in="SourceGraphic" und verschiedenen Werten für das Attribut stdDeviation. Im ersten Element wird der Wert 3 für beide Achsen verwendet, das zweite Elemente verwendet für die x-Achse 6 und für die y-Achse 0, das dritte Element die umgekehrten Einstellungen.

<filter id="einfach">
  <feGaussianBlur stdDeviation="3"/>
</filter>
<filter id="schatten2">
  <feGaussianBlur in="SourceGraphic" stdDeviation="6 0"/>
</filter>
<filter id="schatten3">
  <feGaussianBlur in="SourceGraphic" stdDeviation="0 6"/>
</filter>
<filter id="schatten4">
  <feGaussianBlur in="SourceAlpha" stdDeviation="6"/>
</filter>

Im letzten Filter werden wieder für beide Achsen einheitliche Werte verwendet, aber dafür das Attribut in auf SourceAlpha gesetzt.

Ergebnisse der definierten feGaussianBlur-Filter

Abbildung: Ergebnisse der definierten feGaussianBlur-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