Efeitos de Desfoque do SVG

<defs> e <filter>

Todos os filtros SVG estão em <defs> definido no elemento.<defs> O elemento é uma abreviação de (definitions), que contém definições de elementos especiais (por exemplo, filtros).

<filter> O elemento é usado para definir o filtro SVG.<filter> O elemento tem uma propriedade id obrigatória, usada para identificar o filtro. Em seguida, o gráfico aponta para o filtro a ser usado.

SVG <feGaussianBlur>

Exemplo 1

<feGaussianBlur> O elemento é usado para criar efeitos de desfoque：

Este é o código SVG：

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Experimente você mesmo

Explicação do código：

• A propriedade id do elemento <filter> define o nome único do filtro
• <feGaussianBlur> define o efeito de desfoque
• in="SourceGraphic" define a efeito para todo o elemento
• A propriedade stdDeviation define a quantidade de desfoque
• A propriedade filter do elemento <rect> liga o elemento ao filtro "f1"