Sfocatura Gaussiana SVG

Il filtro SVG deve essere definito all'interno del tag <defs>.

Sfocatura Gaussiana (Gaussian Blur)

Il tag <filter> viene utilizzato per definire i filtri SVG. Il tag <filter> utilizza l'attributo obbligatorio id per definire quale filtro applicare ai grafici?

Il tag <filter> deve essere incluso all'interno del tag <defs>. Il tag <defs> è l'abbreviazione di definitions e permette di definire elementi speciali come i filtri.

Copia il seguente codice nel Blocco Note e salva il file come "filter1.svg". Metti questo file nella tua directory web:

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Spiegazione del codice:

  • L'attributo id del tag <filter> può definire un nome unico per il filtro (lo stesso filtro può essere utilizzato da più elementi nel documento)
  • L'attributo filter:url serve a collegare l'elemento al filtro. Quando si collega l'id del filtro, è necessario utilizzare il carattere #
  • L'effetto di filtro è definito tramite il tag <feGaussianBlur>. Il suffisso fe può essere utilizzato per tutti i filtri
  • L'attributo stdDeviation del tag <feGaussianBlur> può definire l'estensione del sfocatura
  • La parte in="SourceGraphic" definisce l'effetto creato dall'intero immagine

Visualizza esempio

Esempio di un'altra valore di stdDeviation diverso

?xml version="1.0" standalone="no"?
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Visualizza esempio