<Defs> y <filtro>
Todos los filtros de Internet SVG se definen dentro de un <defs> elemento. La <defs> elemento es la abreviatura de las definiciones y contiene la definición de los elementos especiales (such as filters) .
El <filter> elemento se utiliza para definir un filtro SVG. El <filter> elemento tiene un atributo id requerido que identifica el filtro. El gráfico a continuación, apunta a que utilice el filtro.
SVG <feGaussianBlur>
Ejemplo 1
La <feGaussianBlur> elemento se utiliza 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>
Inténtalo tú mismo " Code explanation:
- La id atributo de la <filter> elemento define un nombre único para el filtro
- El efecto de desenfoque se define con el <feGaussianBlur> elemento
- La in="SourceGraphic" parte define que se crea el efecto de todo el elemento
- El stdDeviation atributo define la cantidad de la falta de definición
- El filter atributo de la <rect> elemento vincula el elemento de la "f1" filtro