SVG -Schlagschatten

<defs> und <filter>

Alle SVG-Filter werden innerhalb eines <defs>-Elements definiert. Das Element <defs> ist die Abkürzung für Definitionen und enthält die Definition spezieller Elemente (zB Filter).

Das Element <filter> wird verwendet, um einen SVG-Filter zu definieren. Das Element <filter> hat ein erforderliches id-Attribut, das den Filter identifiziert. Die Grafik zeigt dann auf den zu verwendenden Filter.

SVG <feOffset>

Beispiel 1

Das <feOffset>-Element wird verwendet, um Schlagschatteneffekte zu erzeugen. Die Idee ist, eine SVG-Grafik (Bild oder Element) zu nehmen und sie ein wenig in der xy-Ebene zu verschieben.

Das erste Beispiel versetzt ein Rechteck (mit <feOffset>) und blendet dann das Original über das versetzte Bild (mit <feBlend>):

Hier ist der SVG-Code:

Code-Erklärung:

• Das id-Attribut des <filter>-Elements definiert einen eindeutigen Namen für den Filter
• Das filter-Attribut des <rect>-Elements verknüpft das Element mit dem „f1“-Filter

Beispiel 2

Nun kann das versetzte Bild weichgezeichnet werden (mit <feGaussianBlur>):

Hier ist der SVG-Code:

Code-Erklärung:

• Das stdDeviation-Attribut des <feGaussianBlur>-Elements definiert die Stärke der Unschärfe

Beispiel 3

Jetzt machen Sie den Schatten schwarz:

Hier ist der SVG-Code:

Code-Erklärung:

• Das in-Attribut des <feOffset>-Elements wird in „SourceAlpha“ geändert, wodurch anstelle des gesamten RGBA-Pixels der Alpha-Kanal für die Unschärfe verwendet wird

Beispiel 4

Behandeln Sie nun den Schatten als Farbe:

Hier ist der SVG-Code:

Code-Erklärung:

• Der Filter <feColorMatrix> wird verwendet, um die Farben im Offset-Bild näher an Schwarz zu transformieren. Die drei Werte von '0,2' in der Matrix werden alle mit den roten, grünen und blauen Kanälen multipliziert. Das Reduzieren ihrer Werte bringt die Farben näher an Schwarz heran (Schwarz ist 0)