Tutorial de SVG

Elementos SVG

Exemplos Completo de SVG Efeito de Desfoque no SVG

Sombra no SVG

No SVG, para exibir o efeito de sombra, usamos o elemento <feOffset>. Para criar o efeito de sombra, pegamos o gráfico SVG e o movemos um pouco no plano xy, o Internet Explorer e o Safari não suportam filtros SVG!

Exemplo Online

Abaixo, implementamos um efeito de sombra de fundo紫色:

Exemplo

<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>

Teste e veja‹/›

Atenção: Internet Explorer 9E versões mais antigas não suportam o filtro SVG.

O efeito após a execução é o seguinte:

Explicação de Uso

<filter> id propriedade define o nome único do padrão.
<rect>elemento filter propriedade usada para ligar o elemento a “ p1“”Filtro.*/

criar uma sombra preta

Exemplo

<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>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Atenção: Internet Explorer 9E versões mais antigas não suportam o filtro SVG.

Exemplos Completo de SVG Efeito de Desfoque no SVG