SVG Schlagschatten

<Defs> und <Filter>

Alle SVG - Filter werden in einem definierten <defs> Element. Das <defs> Element ist die Abkürzung für Definitionen und enthält Definition spezieller Elemente (such as filters) .

Die <filter> Element wird verwendet , um ein SVG - Filter zu definieren. Die <filter> Element hat eine erforderliche id - Attribut , die den Filter identifiziert. Die Grafik zeigt dann auf dem Filter zu verwenden.

SVG <feOffset>

Beispiel 1

Das <feOffset> Element wird verwendet , Schlagschatten Effekte zu erzeugen. Die Idee ist , eine SVG - Grafik zu nehmen (image or element) ein (image or element) und es ein wenig in der xy - Ebene zu bewegen.

Das erste Beispiel verschiebt ein Rechteck (with <feOffset>) , dann mischen Sie das Original auf der Oberseite des Offsetbild (with <feBlend>) :

Hier ist der SVG-Code:

Code explanation:

• Das id - Attribut des <filter> Element definiert einen eindeutigen Namen für den Filter
• Das filter - Attribut des <rect> Element verbindet das Element mit dem "f1" Filter

Beispiel 2

Nun kann die Offset - Bild unscharf werden (with <feGaussianBlur>) :

Hier ist der SVG-Code:

Code explanation:

• Das stdDeviation Attribut des <feGaussianBlur> Element definiert die Menge der Unschärfe

Beispiel 3

Nun, machen den Schatten schwarz:

Hier ist der SVG-Code:

Code explanation:

• Die in - Attribut des <feOffset> Element wird geändert "SourceAlpha" , die den Alpha - Kanal für die Unschärfe verwendet anstelle des gesamten RGBA Pixel

Beispiel 4

Nun behandeln den Schatten als Farbe:

Hier ist der SVG-Code:

Code explanation:

• Das <feColorMatrix> Filter wird verwendet , um die Farben im Offset - Bild näher an Schwarz zu transformieren. Die drei Werte von "0,2" in der Matrix alle bekommen durch die roten, grünen und blauen Kanäle vervielfacht. Die Reduzierung ihrer Werte die Farben näher an Schwarz bringt (black is 0)