Filtro <filter> en SVG

El elemento <filter> de SVG se utiliza para agregar efectos bonitos a las imágenes SVG. Por ejemplo, sombras, desvanecimiento o resaltado.

Ejemplo de filtro

Este es un ejemplo simple de filtro SVG, que muestra dos elipses. La elipse izquierda no utiliza el filtro, y la elipse derecha se renderiza con el filtro de desvanecimiento gaussiano:

<svg　width="500"　height="100">
<defs>
　　　　　　<filter　id="blurFilter"　y="-5"　height="40"
　　　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="3"　y="-"/>
　　　　　　</filter>
　　</defs>
　　　　
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:　none;　fill:　#0000ff;　"　/>
　　<ellipse cx="155" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:none;　fill:#0000ff;　filter:url(#blurFilter);"　/>
</svg>

Efecto de la imagen después de ejecutar:

Observe cómo la borde del ovalo derecho está desenfocado.

Entrada y salida del filtro

El filtro SVG necesita algunos datos de entrada (fuente) y aplica efectos de filtro a ellos. La entrada del filtro puede ser la gráfica de la forma (representando colores RGB), el canal Alfa de la forma, o la salida de otro filtro.

El filtro SVG produce una salida gráfica desde la entrada (resultado). Esta salida se muestra generalmente, en lugar de aplicar el filtro a la forma. La salida del filtro se puede usar como entrada para otro filtro. Por lo tanto, se pueden enlazar los filtros.

Esta es una ilustración de la entrada y salida del filtro SVG:

La entrada del filtro SVG se especifica generalmente en la propiedad del elemento de filtro in. Este es un ejemplo:

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

Si se va a usar la salida del filtro SVG como entrada para otro filtro, es necesario agregar la propiedad al elemento de filtro result. Este es un ejemplo:

<feGaussianBlur stdDeviation="3in="SourceGraphic" result="blur"/>

Ahora, otro filtro SVG puede usar la salida de este filtro colocando el valor blur en su propiedad in. En el ejemplo anterior, el valor blur se especifica en la propiedad result del filtro.

Tamaño del filtro

El tamaño de un filtro se establece utilizando sus propiedades x, y, width y height.

Las propiedades x e y se interpretan en relación con los x e y de la forma utilizada como entrada. Debido a que la salida de ciertos filtros suele ser mayor que la entrada (por ejemplo, agregar desenfoque alrededor de la forma), generalmente se deben usar números negativos para x e y para evitar cortar la gráfica añadida por el filtro.

En las propiedades width y height también es simple. Del mismo modo, a veces es necesario especificar un ancho y una altura, que deben ser mayores que la forma de entrada para evitar cortar los efectos adicionados por el filtro.

filtros de combinación

Puede usarFiltro de combinación de elementos. Este es un ejemplo:

<svg　width="500"　height="100">
<defs>
　　　　<filter　id="blurFilter2"　y="-10"　height="40"　x="-10" width="150">
　　　　　　　　<feOffset　in="SourceAlpha"　dx="3"　dy="3"　result="offset2"　/>
　　　　　　　　<feGaussianBlur　in="offset2"　stdDeviation="3"　　result="blur2"/>
　　　　　　　　feMerge>
　　　　　　　　　　　　<feMergeNode in="blur2"　/>
　　　　　　　　　　　　<feMergeNode in="SourceGraphic"　/>
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);"　/>　
</svg>

Este ejemplo crea un filtro SVG que contiene dos elementos de filtro: <feOffset> y <feGaussianBlur>. El efecto de desplazamiento del filtro (feOffset) actúa sobre el canal Alfa de la forma aplicada. El desenfoque gaussiano (feGaussianBlur) actúa sobre la salida del filtro de desplazamiento.

El elemento <feMerge> combina la salida del filtro borroso con la gráfica original. La entrada se combina en el orden en que aparecen en el elemento <feMerge>. Por lo tanto, la entrada posterior se muestra sobre la entrada anterior. El resultado es que la forma de la imagen parece tener una sombra. El efecto de la imagen después de ejecutarlo es:

Filtro de desvanecimiento gaussiano

El filtro de desvanecimiento gaussiano SVG puede desvanecer formas SVG. El filtro de desvanecimiento gaussiano se compone deel elemento <feGaussianBlur> representa. A continuación, se muestra un ejemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter4" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);"　/>
</svg>

Este ejemplo define un <filter> con un <feGaussianblur> interno. Luego, define un rectángulo verde que se refiere a este filtro a través de la propiedad CSS filter. A continuación, se muestra la imagen generada:

Tamaño del desvanecimiento

El atributo stdDeviation del elemento <feGaussianBlur> determina cuánto debe desvanecerse la forma al aplicar el filtro. Un número mayor significa que la forma se desvanecerá más. A continuación, se muestran tres ejemplos con diferentes valores de stdDeumation:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter5" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="2"　/>
　　　　</filter>
　　　　<filter　id="blurFilter6" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="6"　/>
　　　　</filter>
　　　　<filter　id="blurFilter7" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="12"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);"　/>
<rect　x="150"　y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);"　/>
<rect　x="300" y="24" width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);"　/>
</svg>

Efecto de la imagen después de ejecutar:

Note cómo el rectángulo se va volviendo cada vez más borroso, y el valor del atributo stdDeumation del filtro aplicado es mayor.

Desvanecimiento del canal Alpha

El ejemplo anterior utiliza SourceGraphic como entrada, lo que significa que el color RGB de la forma se utiliza como entrada del filtro. Puede cambiar a usar el canal Alpha de la forma como entrada, configurando el valor SourceAlpha en el atributo in del elemento <feGaussianBlur>. A continuación, se muestra un ejemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="blurFilter8" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur in="SourceAlpha" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);"　/>　
</svg>

Efecto de la imagen después de ejecutar:

Tenga en cuenta que incluso si se define un rectángulo con relleno verde, la salida del filtro es en negro y blanco. Esto ocurre cuando se aplica el filtro de desvanecimiento gaussiano al canal Alpha en lugar del canal gráfico (RGB).

Filtro de desplazamiento

El filtro de desplazamiento acepta una entrada y la mueve en la salida. Es decir, puede mover la forma hacia arriba, abajo, izquierda y derecha. Por lo tanto, su funcionamiento es similar al de una transformación, pero se realiza dentro del filtro. A continuación, se muestra un ejemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter id="offsetFilter1" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feOffset　in="SourceGraphic"　dx="80"　dy="20"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　filter:　url(#offsetFilter1);"　/>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　"　/>
</svg>

Este ejemplo define dos rectángulos en la misma posición. Uno de los rectángulos aplica el filtro de desplazamiento, que lo mueve hacia abajo y hacia la derecha.

Efecto de la imagen después de ejecutar.

Parece que el filtro de desplazamiento también tiene otros efectos en las formas (alguno tipo de desdibujado), pero no estoy seguro de por qué ocurre esto. Hasta ahora, no he podido encontrar ninguna explicación sobre por qué ocurre este fenómeno.

Filtro de matriz de color

El filtro de matriz de color se puede usar para aplicar transformaciones de matriz al color de las formas. Este es un ejemplo:

<svg　width="500"　height="250">
<defs>
　　　　<filter　id="colorMatrixFilter1" x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feColorMatrix　in="SourceGraphic"　type="matrix"
　　　　　　　　　　　　　　　　values="0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0　0　0　1　0
　　　　　　　　　　　　　　　　"/>
　　　　</filter>
</defs>
<rect　x="20"　y="20"　width="90"　height="90"
　　　　　　style="stroke:　none;　fill:　#0000ff;　filter:　url(#colorMatrixFilter1);"　/>
</svg>

Los valores de la matriz se proporcionan en el atributo values del elemento <feColorMatrix>. Deben haber4 x 5=20 valor. Estos valores se aplicarán al color del objeto original, como se muestra a continuación:

　0　0　0　rojo　　　0
　0　0　0　verde　0
　0　0　0　azul　　0
　0　0　0　1　　　　　0

Efecto de la imagen después de ejecutar:

Nota: Los resultados de los filtros de matriz de color en Chrome y Firefox son algo extraños. El rectángulo superior se especifica con el color de relleno, pero una vez que el filtro de matriz de color ha completado su trabajo, solo queda el contorno.

Filtro de mezcla

La mezcla de filtros puede combinar la entrada de varios filtros en una. Este es un ejemplo:

<svg　width="500"　height="250">
　　<defs>
　　　　<filter　id="blurFilter3"　y="-10"　height="40"　x="-10" width="150">
　　　　　　<feOffset　in="SourceAlpha"　dx="3"　dy="3"　result="offset3"　/>
　　　　　　<feGaussianBlur　in="offset3"　stdDeviation="3"　　result="blur3"/>
　　　　　　<feBlend in="SourceGraphic" in}}2="blur3" x="-10" width="160"/>
　　　　</filter>
　　</defs>
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　　filter: url(#blurFilter3);"　/>
</svg>

Este ejemplo declara una3Un filtro que aplica varios efectos de filtro. Los dos primeros son el desplazamiento enlazado y el efecto de desenfoque gaussiano. El tercero esSe necesitan dos entradas (in y in2）y combinarlo en un efecto.

El efecto producido es muy similar al obtenido con el filtro de combinación mencionado anteriormente en este documento.