Tutoriales de SVG

elementos SVG

Efecto de desvanecimiento de SVG

SVG utiliza el elemento <feGaussianBlur> para mostrar efectos de desenfoque. <feGaussianBlur> el filtro realiza un desenfoque gaussiano en la imagen de entrada, Internet Explorer 9y versiones anteriores no admiten filtros SVG.

ejemplo

<svg　height="250"　width="250">
　　<defs>
　　　　<filter　id="p1"　x="0"　y="0">
　　　　　　<feGaussianBlur　in="SourceGraphic"　stdDeviation="15"　/>
　　　　</filter>
　　</defs>
　　<rect width="120"altura =120"bordes ="verde"bordes-ancho =3"relleno ="púrpura"filter ="url (#p1)"　/>
</svg>

Prueba y mira‹/›

El efecto de la imagen generada después de ejecutar es el siguiente:

Explicación de uso

La propiedad id del <filter> define el nombre único del patrón.
El elemento <feGaussianBlur> se utiliza para definir el efecto de desvanecimiento.
La parte in =“ SourceGraphic”del elemento <feGaussianBlur> se utiliza para definir el efecto creado para todo el elemento.
La propiedad stdDeviation se utiliza para definir la cantidad de desvanecimiento.
La propiedad de filtro del elemento <rect> se utiliza para enlazar el elemento a“ p1”Filtro。”

Sombra de SVG Patrón de relleno de SVG