Efectos de desenfoque SVG – Barcelona Geeks

El elemento SVG <feGaussianBlur> se utiliza para crear efectos de desenfoque:

Sintaxis:

<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

Atributos:

in: se utiliza para identificar la entrada para la primitiva de filtro dada.
stdDeviation: se utiliza para definir la desviación estándar para la operación de desenfoque.
edgeMode: se utiliza para determinar cómo extender la imagen de entrada según sea necesario con valores de color.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
  
<svg height="400" width="400">
  <defs>
    <filter id="gfgid" x="0.5" y="0.5">
      <feGaussianBlur in="SourceGraphic"
                      stdDeviation="10" />
    </filter>
  </defs>
  
  <rect width="120" height="120"
        stroke="green" stroke-width="4"
        fill="green" filter="url(#gfgid)" />
</svg>
  
</body>
</html>

Producción:

Ejemplo: personalizar el círculo borroso.

<!DOCTYPE html>
<html>
<body>
  
<svg height="400" width="400">
  <defs>
    <filter id="gfgid" x="0" y="0">
      <feGaussianBlur in="SourceGraphic"
                      stdDeviation="05" />
    </filter>
  </defs>
  
        <circle cx="40" cy="40" r="50"
                stroke="black" stroke-width="2"
                fill="grey" filter="url(#gfgid)"/> 
  </svg>
  
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta