Efeito de Desfoque no SVG

O SVG exibe efeitos de borrão usando o elemento <feGaussianBlur>. O filtro <feGaussianBlur> aplica um borrão gaussiano à imagem de entrada, Internet Explorer 9e versões mais antigas não suportam filtros 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>

O efeito da imagem gerada após a execução é como follows:

Explicação de Uso

• A propriedade id do <filter> define o nome único do padrão.

• O elemento <feGaussianBlur> é usado para definir o efeito de desfoque.

• A parte in = "SourceGraphic" do elemento <feGaussianBlur> é usada para definir o efeito criado para todo o elemento.

• A propriedade stdDeviation é usada para definir a quantidade de desfoque.

• A propriedade de filtro do elemento <rect> é usada para conectar o elemento ao " p1Filtro.