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.