feBlend
Podemos combinar objetos SVG ( imágenes, trazados o incluso los imágenes resultantes de un filtro ), utilizando <feMerge>, <feComposite> o <feBlend>.
Recordemos primero que es 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. Si el valor de flood-opacity = "1" el elemento resultante es totalmente opaco; si 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>. Decimos que el atributo result tiene un alcance de carácter local.
feBlend
También podemos utilizar <feBlend> para combinar imágenes. La sintaxis utilizada es la siguiente:
<feBlend in="img1" in2="img2" mode="normal" />
Exactamente como en el caso de <feComposite> indicamos las dos imágenes a combinar utilizando los atributos in e in2. A diferencia de <feComposite> utilizamos el atributo mode para indicar la modalidad deseada.
El atributo in de feBlend identifica el primer objeto a combinar.
El atributo in2 identifica el segundo objeto.
El atributo mode identifica el modalidad de fusión y puede tomar como valor una de estas palabras clave:
mode = "normal | multiply | screen | darken | lighten"
Si el atributo mode no esta especificado, el valor por defecto es mode = "normal"
En el siguiente ejemplo utilizamos mode="normal". 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>
Como ya lo hemos mencionado, el atributo mode puede tomar como valor una de estas palabras clave:
mode = "normal | multiply | screen | darken | lighten"
Veamos algunos ejemplos.