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.