feComposite

facebook-svg gplus-svg twitter-svg

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. 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.

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:


  
  
    
    
    
  
  
  
  operator="over"
operator="over"

Veamos que pasa al utilizar otros operadores:

operator="over"   operator="in"   operator="out"   operator="atop"   operator="xor"

Si escogemos operator="arithmetic" tenemos que especificar otros cuatro atributos: k1, k2, k3 y k4.


  
  
    
    
    
  
  
  
  k1="0" k2="1"
  k3=".5" k4="0" 
k1="0" k2="1" k3=".5" k4="0"

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.

k1="1" k2="0" k3="0" k4="0" k1="0" k2="1" k3="0" k4="0" k1="0" k2="0" k3="1" k4="0" k1="0" k2="1" k3=".5" k4="0" k1="0" k2=".5" k3="1" k4="0"