Ombre esterne SVG
<def> e <filtro>
Tutti i filtri SVG sono definiti all'interno di un elemento <defs>. L'elemento <defs> è l'abbreviazione di definizioni e contiene la definizione di elementi speciali (come i filtri).
L'elemento <filtro> viene utilizzato per definire un filtro SVG. L'elemento <filter> ha un attributo id obbligatorio che identifica il filtro. Il grafico punta quindi al filtro da utilizzare.
SVG <feOffset>
Esempio 1
L'elemento <feOffset> viene utilizzato per creare effetti di ombra esterna. L'idea è quella di prendere un grafico SVG (immagine o elemento) e spostarlo un po' nel piano xy.
Il primo esempio esegue l'offset di un rettangolo (con <feOffset>), quindi fonde l'originale sopra l'immagine offset (con <feBlend>):
Ecco il codice SVG:
Esempio
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feBlend in="SourceGraphic" in2="offOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Spiegazione del codice:
- L'attributo id dell'elemento <filter> definisce un nome univoco per il filtro
- L'attributo filter dell'elemento <rect> collega l'elemento al filtro "f1".
Esempio 2
Ora, l'immagine offset può essere sfocata (con <feGaussianBlur>):
Ecco il codice SVG:
Esempio
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>
Spiegazione del codice:
- L'attributo stdDeviation dell'elemento <feGaussianBlur> definisce la quantità di sfocatura
Esempio 3
Ora, rendi l'ombra nera:
Ecco il codice SVG:
Esempio
<svg height="140" width="140">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20"
dy="20" />
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
Spiegazione del codice:
- L'attributo in dell'elemento <feOffset> viene modificato in "SourceAlpha" che utilizza il canale alfa per la sfocatura invece dell'intero pixel RGBA
Esempio 4
Ora, tratta l'ombra come un colore:
Ecco il codice SVG:
Esempio
<svg height="140" width="140">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feColorMatrix result="matrixOut" in="offOut"
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 result="blurOut" in="matrixOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>
Spiegazione del codice:
- Il filtro <feColorMatrix> viene utilizzato per trasformare i colori nell'immagine offset più vicini al nero. I tre valori di '0,2' nella matrice vengono tutti moltiplicati per i canali rosso, verde e blu. La riduzione dei loro valori avvicina i colori al nero (il nero è 0)