feColorMatrix

facebook-svg gplus-svg twitter-svg

El elemento <feColorMatrix> puede ser utilizado para ajustar la matriz del color ( color matrix ) de un objeto SVG.
El atributo type indica el tipo de operación matricial, y puede tomar uno de estos valores:

type = "matrix | saturate | hueRotate | luminanceToAlpha"

type = "matrix"

Si type="matrix", tenemos que proporcionar una lista de 4 x 5 = 20 números ( entre 0 y 1 ). Estos números aparecen, separados por un espacio en blanco o por una coma, como valor del atributo values. Para claridad acostumbramos a separar esta lista en 4 grupos de 5 números. Cada grupo representa uno de los tres colores primarios ( RGB ) o el canal alfa del imagen.
Por ejemplo: esta es la lista de valores que deja sin cambiar el color original:

           values ="1 0 0 0 0 // rojo
                    0 1 0 0 0 // verde
                    0 0 1 0 0 // azul
                    0 0 0 1 0"// alfa

Si por de otra parte queremos invertir los colores, con tal de que el rojo se convierta en azul, y el azul en rojo, tenemos que utilizar esta otra lista de valores:

           values ="0 0 1 0 0 // rojo
                    0 1 0 0 0 // verde
                    1 0 0 0 0 // azul
                    0 0 0 1 0"// alfa

En el siguiente ejemplo construimos un grupo de 5 rectángulos de colores de rojo a azul ( <g id="colores1"> ).
Primero utilizamos el grupo ( con <use>) sin filtro alguno.
Después utilizamos de nuevo el grupo ( la segunda fila de rectángulos ) y le aplicamos un filtro ( #identidad ) que deja sin cambiar el color.
Finalmente utilizamos el grupo ( la tercera fila de rectángulos ) y le aplicamos otro filtro ( #rojoaazul ) que invierte los colores: cambia el rojo a azul y el azul a rojo.




  
    
    				
    				
    			
    
  

  
    
  
  
    
  	
	
  
  
  		

En este otro ejemplo el rojo se convierte en verde y el verde en azul.




  
    
    				
    				
    			
    
  

  
    
  	
	
  
  		

type = "hueRotate"

El elemento <feColorMatrix> tiene otras maneras útiles para modificar el color.

Pensemos un momento en la rueda de los colores. Cada grado de esta rueda es un color. De aquí que "hue" es un número de 0 a 359. A lo largo de los 360° el color cambia de rojo ( 0° ) a verde ( 120°) a azul ( 240°) y de nuevo a rojo ( 360°).

Si el atributo type="hueRotate" ( literalmente: gira el matiz ), el filtro cambia el ángulo del color con el número de grados sexagesimales indicado por el atributo values.




  
    
    				
    				
    			
    
  
  
    
  
  
    
  
		 
    
  
		
   
   
   
   

Por ejemplo si values="180" obtenemos el negativo de la imagen, ya que cada color se transforma en su complementario.


al faro

  
    
  
  
al faro

type = "saturate"

En hsl la saturación de un color se representa en porcientos. Por lo cual la saturación puede tomar valores de 100% ( color vivo, intenso ) a 0% ( grises ).

100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%

Si el atributo type="saturate", podemos indicar la saturación del color a través del atributo values. Si values="1" tenemos una saturación igual a la de la imagen original. Para valores debajo de 1 la imagen va hacia escalas de grises, mientras que para valores mas grandes que 1 obtenemos colores intensos, súper saturados.




  
    
    				
    				
    			
    
		

  
    
  
	
    
  
	
    
  
		
    
  
  
  
  
  

Blanco y negro

Podemos fácilmente deducir que si type="saturate" y values="0" obtenemos imágenes en blanco y negro.  Pero podemos conseguir lo mismo utilizando type="matrix". Para esto tenemos que utilizar la siguiente lista de valores:

        values = "0.2125  0.7154  0.0721  0  0
                  0.2125  0.7154  0.0721  0  0
                  0.2125  0.7154  0.0721  0  0
                  0       0       0       1  0"


  
    
  
  



  
     
  
  

Colores saturados

En el siguiente ejemplo el atributo type="saturate" y values="10". Esto hace que los colores sean intensos, súper saturados.
Podemos conseguir lo mismo utilizando type="matrix". Para esto tenemos que calcular la lista de valores utilizando estos criterios ( en este caso s = 10 ) :

        values = "0.213+0.787*s  0.715-0.715*s  0.072-0.072*s 0  0 
                  0.213-0.213*s  0.715+0.285*s  0.072-0.072*s 0  0 
                  0.213-0.213*s  0.715-0.715*s  0.072+0.928*s 0  0 
                  0              0              0             1  0"


  
    
  
    

type = "luminanceToAlpha"

Si type="luminanceToAlpha" el filtro pone a 0 los canales de colores y crea un canal basado en el canal alfa o luminancia de la imagen. La imagen resultante es una imagen semitransparente. El atributo values, si declarado, es ignorado por el filtro.
Podemos conseguir el mismo efecto utilizando type="matrix" junto con la siguiente lista de valores:

          values="0       0       0       0  0
                  0       0       0       0  0
                  0       0       0       0  0
                  0.2125  0.7154  0.0721  0  0"


  
      
  
		



  
  
														
  		
		

Podemos utilizar <feColorMatrix type="luminanceToAlpha" en combinación con <feComposite> para "iluminar" una imagen ( <feComposite operator="out"... ) o para generar una imagen difuminada  ( <feComposite operator="in"... ).