Schatten mit SVG-Filtern

Browser-Ansicht

Diese SVG Objektgrafik demonstriert die Programmierung eines Schattens als typische Anwendung von Filtern.

Das blaue 'Würfel'-Objekt besteht aus einem Quadrat (<rect>-Element). Die beiden Seiten sind mit <path>-Elementen konstruiert.

Das rote 'Kugel'-Element besteht aus einem Kreis (<circle>-Element), dessen Füllung mit einem Farb-Gradienten angegeben ist.

• Von beiden Objekten wird ein gemeinsamer Schatten erzeugt, dessen Aussehen man interaktiv steuern kann. Die 'schattenfreien' Objekte, ihr α-Kanal und der Schatten lassen sich zum Experimentieren getrennt oder gemeinsam angezeigen.

Ein anderes Beispiel mit praktischer Anwendung von Schatten-Filtern: → WikiBooks-SVG


SVG-Quelltext des Schatten-Filters

(vereinfachter Ausschnitt, jedoch mit den aktuellen Einstellungen)
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="F1"/>
<feOffset in="F1" dx="10" dy="10" result="F2"/>
<feComposite in="SourceGraphic" in2="F2" operator="over" />
</filter>

SVG-Quelltext des Filter-Beispiels

◀  Diesen Text hat ihr Browser erhalten und daraus die Objektgrafik hergestellt.

• Das <desc>-Element enthält beschreibenden Text (Meta-Daten). Bei richtiger Anwendung kann man nach den darin enthaltenen Stichworten suchen.

• Ein → CSS <style>-Element enthält die Regeln zur Formatierung der Elemente. Lediglich der Farb-Gradient 'ball' wird im <defs>-Element angegeben.

• Im umfangreichen <defs>-Element werden die Regeln der verwendeten Filter und des Farb-Gradienten festgelegt.
Jeder Filter hat einen oder mehrere Eingänge und einen Ausgang. Als Eingang wird entweder die Original-Grafik verwendet ( SourceGraphic, SourceAlpha, BackgroundImage, ... ) oder der Ausgang eines vorher angewendeten Filters. Wenn der Ausgang mit dem Attribut result benannt wird, kann man ihn als Eingang für weitere Filter verwenden.

• Zuletzt folgen die wenigen zu zeichnenden Objekte. Die <g>-Elemente (Gruppen) dienen dazu, Elemente zusammenzufassen und Methoden (Skalierung, Filter) auf die Elemente der Gruppe anzuwenden.

Links: W3Schools, W3C