SVG Drop Shadows

<defs> și <filter>

Toate filtrele SVG sunt definite într - un <defs> Element. <defs> Elementul este prescurtarea de la definițiile și definirea unor elemente speciale (such as filters) .

<filter> Elementul este folosit pentru a defini un filtru SVG. <filter> Elementul are un atribut id obligatoriu care identifică filtrul. Imaginea arată apoi filtrul de utilizat.

SVG <feOffset>

Exemplul 1

<feOffset> Elementul este folosit pentru a crea efecte de umbră picătură. Ideea este de a lua un grafic SVG (image or element) un (image or element) de (image or element) și mutați - l un pic în planul xy.

Primul exemplu compensează un dreptunghi (with <feOffset>) , apoi amestec original pe partea de sus a imaginii de offset (with <feBlend>) :

Aici este codul SVG:

Code explanation:

• id atribut al <filter> Element definește un nume unic pentru filtrul
• filter atribut al <rect> elementul leagă elementul de la "f1" filtru

Exemplul 2

Acum, imaginea de offset poate fi neclară (with <feGaussianBlur>) :

Aici este codul SVG:

Code explanation:

• stdDeviation atribut al <feGaussianBlur> Elementul definește cantitatea de neclaritate

Exemplul 3

Acum, face negru umbra:

Aici este codul SVG:

Code explanation:

• in atribut al <feOffset> elementul este schimbat la "SourceAlpha" , care utilizează canalul alfa pentru neclaritatea în locul întregului pixel RGBA

Exemplul 4

Acum, tratează umbra ca o culoare:

Aici este codul SVG:

Code explanation:

• <feColorMatrix> filtru este utilizat pentru a transforma culorile din imaginea de offset mai aproape de negru. Cele trei valori ale „0.2“ în matrice obține toate multiplicate cu canalele roșu, verde și albastru. Reducerea valorilor lor aduce culorile mai aproape de negru (black is 0)