Effetti Sfocatura SVG
<def> e <filtro>
Tutti i filtri SVG Internet 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 <feGaussianBlur>
Esempio 1
L'elemento <feGaussianBlur> viene utilizzato per creare effetti di sfocatura:
Ecco il codice SVG:
Esempio
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
/>
</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'effetto sfocato è definito con l'elemento <feGaussianBlur>
- La parte in="SourceGraphic" definisce che l'effetto viene creato per l'intero elemento
- L'attributo stdDeviation definisce la quantità di sfocatura
- L'attributo filter dell'elemento <rect> collega l'elemento al filtro "f1".