Efectos de desenfoque de SVG

<defs> y <filter>

Todos los filtros SVG están en <defs> se define en el elemento.<defs> El elemento es una abreviatura de (definitions), que contiene definiciones de elementos especiales (como filtros).

<filter> El elemento se utiliza para definir los filtros SVG.<filter> El elemento tiene una propiedad id obligatoria, utilizada para identificar el filtro. Luego el gráfico se dirige al filtro que se utilizará.

SVG <feGaussianBlur>

Ejemplo 1

<feGaussianBlur> El elemento se utiliza para crear efectos de desvanecimiento:

Este es el 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>

Prueba por ti mismo

Explicación del código:

• La propiedad id del elemento <filter> define el nombre único del filtro
• <feGaussianBlur> define el efecto de desvanecimiento
• in="SourceGraphic" se define como el efecto creado para todo el elemento
• La propiedad stdDeviation define la cantidad de desenfoque
• La propiedad filter del elemento <rect> vincula el elemento a la filtro "f1"