Efectos de desenfoque SVG
Descripción de los filtros SVG
Todos los filtros SVG se definen dentro de un elemento <defs>. El elemento <defs> es una abreviatura de "definiciones". Contiene la definición de elementos específicos como los filtros.
El elemento <filter> define un filtro SVG. Este elemento tiene un atributo id (obligatorio) que identifica el filtro. El elemento <filter> no se renderiza directamente. Su único uso es cuando se puede hacer referencia a él mediante el atributo filter en SVG y la función url() en CSS.
Cada elemento <filter> contiene diferentes elementos de filtro como hijos. Estas primitivas de filtro realizan una operación gráfica esencial en una o más entradas y producen un solo resultado. Además de usar el resultado de otras primitivas como entrada, una primitiva de filtro también puede aceptar otras entradas como SourceGraphic y SourceAlpha.
Todos los elementos de filtro contienen el prefijo fe, que significa "efecto de filtro".
Actualmente existen 17 primitivas de filtro definidas en la especificación de filtros SVG.
En nuestro ejemplo, utilizamos el elemento <feGaussianBlur> para crear un efecto de desenfoque.
Ejemplo de creación de un efecto de desenfoque:
Ejemplo de creación de un efecto de desenfoque
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="150" height="150">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Explicación del código:
- El atributo id del elemento
<filter>especifica un nombre único para el filtro. - El efecto de desenfoque se especifica con el elemento
<feGaussianBlur>. - La parte in="SourceGraphic" especifica que el efecto se crea para todo el elemento.
- El atributo stdDeviation especifica la cantidad de desenfoque.
- El atributo filter del elemento
<rect>vincula el elemento al filtro "filter".
Práctica
¿Cuáles son las funciones de los atributos stdDeviation e in en el filtro SVG 'feGaussianBlur'?