SVG/Anwendung und Praxis/Licht und Schatten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können HTML-Elementen sowohl mit der box-shadow-Eigenschaft als auch der dropshadow()-Funktion des CSS-Filters einen Schatten geben.

In SVG gibt es keine eigene Eigenschaft für Schatten, sondern diese müssen aus mehreren primitiven Filtern selbst erzeugt werden, was andererseits die Möglichkeit zu feineren Abstimmungen mit sich bringt.

Anwendungsbeispiel[Bearbeiten]

Erzeugen eines weiteren Objekts mit feOffset[Bearbeiten]

Ein (Schlag)-Schatten ist ja ein mittels einer Lichtquelle erzeugtes Projektionsbild des im „Weg des Lichtes stehenden“ Gegenstands. Deshalb wird in einem ersten Schritt unsere Grafik mit dem feOffset-Filter verdoppelt.

Beispiel ansehen …
<defs>
  <filter id="f1" x="0" y="0" width="200%" height="200%">
    <feOffset in="SourceGraphic" result="translatedObject"  dx="20" dy="20" />
    <feBlend in="SourceGraphic" in2="translatedObject" mode="normal" />
  </filter>
</defs>

<g transform="translate(250,0)">
 <use xlink:href="#doppeldecker" filter="url(#f1)"/>
 <text x="20" y="190">Verdoppelung mit feOffset</text>
</g>
Der Filter besteht aus einem feOffset-Filter, der aus der Urspungsgrafik ein weiteres Bild mit einer Verschiebung von 20px in die x- und y-Richtung erzeugt. Dieses wird mittels des feBlend-Filters wieder mit der Urspungsgrafik zusammengeführt.

Unschärfe[Bearbeiten]

Durch die Streuung des Sonnenlichts in der Luft und die Reflektion von hellen Flächen ist ein Schatten aber nie so abgegrenzt wie im obigen Beispiel, sondern hat nur verschwommenen Konturen. Mit dem feGaussianBlur-Filter, dem so genannten „Gausschen Weichzeichner“ können Sie die Ursprungsgrafik nun verwischen.

Beispiel ansehen …
<defs>
  <filter id="f1" x="0" y="0" width="200%" height="200%">
    <feOffset in="SourceGraphic" result="translatedObject"  dx="20" dy="20" />
    <feGaussianBlur in="translatedObject" result="blurredObject"  stdDeviation="10" />
    <feBlend in="SourceGraphic" in2="blurredObject" mode="normal" />
  </filter>
</defs>

<g transform="translate(250,0)">
 <use xlink:href="#doppeldecker" filter="url(#f1)"/>
 <text x="20" y="190">Verwischen mit feGaussianBlur </text>
</g>
Das Ergebnis desfeOffset-Filters wird mit dem feGaussianBlur-Filter verwischt, sodass es nur noch verschwommen ist. Die Ausgangsgrafik blurredObject wird mittels des feBlend-Filters wieder mit der Urspungsgrafik zusammengeführt.

Schattenfarbe[Bearbeiten]

Farbige Schatten sind eher ein Sonderfall unter speziellen Lichtverhältnissen. Um unseren Schatten grau einzufärben gibt es zwei alternative Vorgehensweisen:

Beispiel ansehen …
<defs>
    <feOffset in="SourceAlpha" result="translatedObject"  dx="20" dy="20" />
	<feGaussianBlur in="translatedObject" result="blurredObject"  stdDeviation="10" />
    <feBlend in="SourceGraphic" in2="blurredObject" mode="normal" />
  </filter>
  
  <filter id="f2" x="0" y="0" width="200%" height="200%">
    <feOffset in="SourceGraphic" result="translatedObject"  dx="20" dy="20" />
    <feColorMatrix in="translatedObject" result="matrixOut" type="matrix"
               values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
    <feGaussianBlur in="matrixOut" result="blurOut" stdDeviation="10" />
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />	
  </filter>  
</defs>
Im linken Beispiel wird anstelle der Ausgangsgrafik selbst nur der Alphakanal der Ausgangsgrafik verwendet.

<feOffset in="SourceAlpha" .../>

Im rechten Beispiel wird das Ergebnis der Verschiebung mit feOffset durch den feColorMatrix-Filter gefärbt. Durch die Multplikation der Farbwerte für rot, grün und blau werden sie dunkler und schwärzer.

Schlaglicht und Innenschatten[Bearbeiten]

Beleuchtete Objekte werfen aber nicht nur einen Schlagschatten auf den Hintergrund, sondern erscheinen im Schlaglicht heller und auf der abgewandten, aber sichtbaren Seite dunkler.


Beispiel ansehen …
	<radialGradient id="gold" cx="0.3" cy=".3" r=".5" >
		<stop offset="0%" stop-color="#fff" />
		<stop offset="100%" stop-color="gold" />
	</radialGradient>
	
	<filter id="InnerShadow">
		<feOffset dx="-20" dy="-20" />
		<feGaussianBlur stdDeviation="10" result="blurOut"/>
		<feComposite in="SourceGraphic" in2="blurOut" operator="out" result="inverseOut"/>
		<feFlood flood-color="black" flood-opacity="0.75" result="color" />
		<feComposite in="color" in2="inverseOut" operator="in" result="shadow"/>
		<feComposite in="shadow" in2="SourceGraphic" operator="over" />
	</filter>
Der Apfel und die Birne erhalten als Füllung einen radialGradient, der die beleuchtete Fläche weiß darstellt. Sie verläuft in die jeweilige Grundfarbe.

Zusätzlich können Sie mit dem InnerShadow-Filter Teile der Urspungsgrafik schattieren.

Wenn Sie die Ursprungsgrafik sowohl innen als auch außen schattieren wollen, müssen Sie beide Filter innerhalb eines Filterelements notieren und zum Schluss mit feBlend wieder zusammenführen. Ein Aufrufen mehrerer Filter ist in SVG leider nicht möglich.

Beleuchtungseffekte[Bearbeiten]

Mit feGaussianBlur erzeugte Schlagschatten können aber auch als Ausgangspunkt für einen Beleuchtungseffekt mit dem feSpecularLighting-Filter verwendet werden. Der Wischeffekt des Schattens sorgt für eine abgerundete Oberfläche der Alphawerte, die durch den Beleuchtungseffekt hervorgehoben werden.


Weblinks[Bearbeiten]

Siehe auch[Bearbeiten]