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


  
  
    
    
    
  
  
  
  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"

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.