<Defs> e <filter>
Tutti i filtri internet 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 <feGaussianBlur>
esempio 1
Il <feGaussianBlur> elemento 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>
Prova tu stesso " Code explanation:
- L' id attributo del <filter> elemento definisce un nome univoco per il filtro
- L'effetto di sfocatura viene definito con il <feGaussianBlur> elemento
- La in="SourceGraphic" parte definisce che l'effetto è creato per l'intero elemento
- Il stdDeviation attributo definisce la quantità della sfocatura
- Il filter attributo del <rect> elemento collega l'elemento a "f1" filtro