Corso SVG

Elementi SVG

Esempi completi SVG Effetto sfocatura SVG

Ombra SVG

In SVG, per visualizzare l'effetto ombra, viene utilizzato l'elemento <feOffset>. Per ottenere l'effetto ombra, si prende la grafica SVG e si sposta un po' in piano xy, Internet Explorer e Safari non supportano i filtri SVG!

Esempio online

Ecco un esempio di effetto di ombra di sfondo viola:

Esempio

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0" width="200%" height="200%">
　　　　　　<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
　　　　　　<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
　　　　　　<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
　　　　</filter>
　　</defs>
　　<rect width="90" height="90" stroke="blue" stroke-width="3" fill="purple" filter="url(#p1)" />
　　</svg>

Prova a vedere </>

Attenzione: Internet Explorer 9 e versioni precedenti non supportano i filtri SVG.

Ecco l'effetto dopo l'esecuzione:

Spiegazione dell'uso

L'attributo id dell'<filter> definisce il nome unico del modello.
L'attributo filter dell'elemento <rect> viene utilizzato per collegare l'elemento al filtro "p1".

Creare un'ombra nera

Esempio

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<defs>
　　　　<filter id="f1" 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(#f1)" />
</svg>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Attenzione: Internet Explorer 9 e versioni precedenti non supportano i filtri SVG.

Esempi completi SVG Effetto sfocatura SVG