Efectos de desenfoque SVG
<defs> y <filtro>
Todos los filtros SVG de Internet se definen dentro de un elemento <defs>. El elemento <defs> es la abreviatura de definiciones y contiene definiciones de elementos especiales (como filtros).
El elemento <filter> se utiliza para definir un filtro SVG. El elemento <filter> tiene un atributo de id obligatorio que identifica el filtro. El gráfico luego apunta al filtro a usar.
SVG <feGaussianBlur>
Ejemplo 1
El elemento <feGaussianBlur> se usa para crear efectos de desenfoque:
Aquí está el código SVG:
Ejemplo
<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>
Explicación del código:
- El atributo id del elemento <filter> define un nombre único para el filtro
- El efecto de desenfoque se define con el elemento <feGaussianBlur>
- La parte in="SourceGraphic" define que el efecto se crea para todo el elemento
- El atributo stdDeviation define la cantidad de desenfoque
- El atributo de filtro del elemento <rect> vincula el elemento al filtro "f1"