<Defs> e <filter>
Tutti i filtri SVG sono definite all'interno di un <defs> elemento. Il <defs> elemento è l'abbreviazione di definizioni e contiene la definizione di elementi speciali (such as filters) .
Il <filter> elemento viene utilizzato per definire un filtro SVG. Il <filter> elemento ha un attributo id richiesto che identifica il filtro. Il grafico indica poi al filtro da utilizzare.
SVG <feOffset>
esempio 1
Il <feOffset> elemento viene utilizzato per creare effetti ombra. L'idea è di prendere un grafico SVG (image or element) e spostarlo un po 'nel piano xy.
Il primo esempio compensa un rettangolo (with <feOffset>) , quindi miscelare l'originale sulla parte superiore dell'immagine di offset (with <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>
Prova tu stesso " Code explanation:
- L' id attributo del <filter> elemento definisce un nome univoco per il filtro
- Il filter attributo del <rect> elemento collega l'elemento a "f1" filtro
esempio 2
Ora, l'immagine di offset può essere offuscata (with <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>
Prova tu stesso " Code explanation:
- Il stdDeviation attributo del <feGaussianBlur> elemento definisce la quantità della sfocatura
esempio 3
Ora, fare il nero ombra:
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>
Prova tu stesso " Code explanation:
- L' in attributo del <feOffset> elemento viene modificato in "SourceAlpha" che utilizza il canale alfa per la sfocatura anziché l'intero pixel RGBA
esempio 4
Ora, trattare 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>
Prova tu stesso " Code explanation:
- Il <feColorMatrix> filtro viene utilizzato per trasformare i colori dell'immagine di offset più vicino al nero. I tre valori di '0,2' nella matrice tutti vengono moltiplicati per i canali rosso, verde e blu. Ridurre i loro valori porta i colori più vicini al nero (black is 0)