Desenfoque gaussiano SVG

El filtro SVG debe definirse dentro de la etiqueta <defs>.

Desenfoque gaussiano (Gaussian Blur)

La etiqueta <filter> se utiliza para definir filtros SVG. ¿Qué filtro se aplica a los gráficos mediante el atributo id obligatorio de la etiqueta <filter>?

La etiqueta <filter> debe estar anidada dentro de la etiqueta <defs>. <defs> es la abreviatura de definitions y permite definir elementos especiales como los filtros.

Copie el siguiente código en un bloc de notas y guárdelo como "filter1.svg". Coloque este archivo en su directorio web:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Explicación del código:

  • El atributo id de la etiqueta <filter> define un nombre único para el filtro (el mismo filtro puede ser utilizado por varios elementos en el documento)
  • La propiedad filter:url se utiliza para enlazar el elemento al filtro. Al enlazar el id del filtro, debe usarse el carácter #
  • El efecto de filtro se define mediante la etiqueta <feGaussianBlur>. El sufijo fe se puede usar para todos los filtros
  • El atributo stdDeviation del etiqueta <feGaussianBlur> define el grado de desdibujado
  • La parte in="SourceGraphic" define el efecto creado por toda la imagen

Ver ejemplo

Otro ejemplo con un valor de stdDeviation diferente

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Ver ejemplo