Effetto sfocatura SVG

SVG utilizza l'elemento <feGaussianBlur> per visualizzare l'effetto sfocatura. Il filtro <feGaussianBlur> applica una sfocatura Gaussiana all'immagine di input, Internet Explorer 9 e versioni precedenti non supportano i filtri SVG.

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0">
　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
　　　　</filter>
　　</defs>
　　<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />
</svg>

L'effetto dell'immagine generata dopo l'esecuzione è come segue:

Spiegazione dell'uso

• L'attributo id del <filter> definisce il nome unico del modello.

• L'elemento <feGaussianBlur> utilizzato per definire l'effetto sfocatura.

• La parte in =“SourceGraphic” dell'elemento <feGaussianBlur> utilizzata per definire l'effetto creato per l'intero elemento.

• L'attributo stdDeviation utilizzato per definire la quantità di sfocatura.

• L'attributo filter del elemento <rect> utilizzato per collegare l'elemento al filtro “p1”.