feComposite
Podemos combinar objetos SVG ( imágenes, trazados o incluso los imágenes resultantes de un filtro ), utilizando <feMerge>, <feComposite>
o <feBlend>.
Hablemos primero de feFlood
Utilizamos <feFlood>
para llenar de color ( flood == inundar ) una zona rectangular. Los atributos x
e y
definen el origen del rectángulo, mientras que los atributos width
y height
definen la anchura, respectivamente la altura de este. El atributo flood-color
define el color de relleno, mientras que flood-opacity
define la opacidad. El valor por defecto de flood-opacity
es 1. Si flood-opacity = "1"
el elemento resultante es totalmente opaco; si por el contrario el valor de este atributo es 0 el elemento resultante es totalmente transparente.
En el caso que queramos combinar este filtro con otro, podemos utilizar el atributo result
que recoge el resultado de <feFlood>
para poder referenciarlo más tarde dentro del mismo <filter>
. El atributo result
es un identificador de alcance local sensible a las mayúsculas y minúsculas y su valor tiene que ser único dentro del mismo filtro pero no tiene porque ser único dentro del documento.
feComposite
La sintaxis para <feComposite>
es la siguiente:
<feComposite in="img1" in2="img2" operator="over"/>
El atributo in
de feComposite identifica el primer objeto a combinar.
El atributo in2
identifica el segundo objeto.
El atributo operator
identifica el tipo de composición a utilizar y puede tomar como valor una de estas palabras clave:
operator = "over | in | out | atop | xor | arithmetic"
En el siguiente ejemplo utilizamos operator="over"
y en este caso el resultado es igual al que se habría obtenido utilizando <feMerge> de esta manera:
<feMerge> <feMergeNode in="img2" /> <feMergeNode in="img1" /> </feMerge>
Veamos un ejemplo básico:
Veamos que pasa al utilizar otros operadores:
Si escogemos operator="arithmetic"
tenemos que especificar otros cuatro atributos: k1
, k2
, k3
y k4
.
En este caso el resultado pare cada pixel se calcula según esta regla:
resultado = k1 * img1 * img2 + k2 * img1 + k3 * img2 + k4
Veamos algunos ejemplos.
Un caso práctico:
Hemos visto como aplicar una sombra negra a un rectángulo o a cualquier otro elemento SVG. Pero en el CSS las sombras pueden tomar cualquier color. Es posible hacer lo mismo en SVG. Veamos como:
Primero aplicamos un desenfoque gaussiano <feGaussianBlur>
al grafico de origen ( SourceGraphic
).
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="desenfoque />
A continuación utilizamos <feFlood>
para crear un rectángulo de color.
<feFlood flood-color="purple" result="color"/>
Utilizamos <feComposite>
para combinar los dos filtros anteriores i crear una sombra morada ( purple
).
<feComposite in="color" in2="desenfoque" operator="in" result="sombra" />
Queremos desplazar la sombra resultante ( result="sombra"
) unos 3px hacia la derecha y abajo. Lo hacemos utilizando el elemento <feOffset>
<feOffset in="sombra" dx="3" dy="3" result="desplazamiento" />
Finalmente combinamos el resultado de los filtros anteriores: la sombra ( result="desplazamiento"
) y el grafico de origen: SourceGraphic
utilizando <feMerge>
.
See the Pen Aplicar una sombra morada en SVG* by Gabi (@enxaneta) on CodePen.