SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento <feGaussianBlur> agrega un desenfoque suave al gráfico en función de la desviación estándar proporcionada en la primitiva de entrada.
Sintaxis:
<feGaussianBlur in="" stdDeviation="" edgeMode=""/>
Atributos:
- in: el atributo in identifica la entrada para la primitiva de filtro dada.
- stdDeviation: Define la desviación estándar para la operación de desenfoque suave. El valor predeterminado es 0.
- edgeMode: significa los píxeles adicionales en los bordes de la capa de entrada.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 1000 1000"> <filter id="lightMe2"> <feGaussianBlur in="FillPaint" stdDeviation="10" edgeMode="wrap" /> <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <rect x="20" y="20" width="200" height="200" fill="green" style="filter: url(#lightMe2);" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 1000 1000"> <filter id="lightMe3" x="-50" y="-40" width="200" height="150"> <feOffset in="BackgroundImage" dx="10" dy="10" /> <feGaussianBlur in="offset2" stdDeviation="3" /> <feMerge> <feMergeNode in="blur" /> <feMergeNode in="SourceAlpha" /> </feMerge> </filter> <rect x="20" y="20" width="200" height="200" fill="green" style="filter: url(#lightMe3);" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por epistler_999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA