Banner

Ultima revisión 01/11/2012

SVG Filters: Uso de feColorMatrix (Matrices de Color)

La primitiva feColorMatrix permite la redefinición de colores dentro de una imagen, basandose en la capacidad de multiplicar los niveles de cada píxel RGB y alfa por coeficientes numéricos. En una situación muy compleja, un usuario podría especificar una matriz entera de veinte coeficientes (es decir, de 4 por 5), que debe de multiplicarse por el vector de uno a cuatro compuesto por los valores R G B A que representan el valor de color y opacidad de un píxel determinado.

Las filas de la matriz representan respectivamente los tonos R, G, B, y el Alfa, al igual que el vector de uno a cuatro antes comentado.

El elemento feColorMatrix cuenta con unas matrices predefinidas que se han asociado a efectos comunes como son saturate, hueRotate o luminanceToAlpha.

Tipo: 

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feColorMatrix">
            <feColorMatrix values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 0 1 0" type="matrix" />
        </filter>
    </defs>
    <image x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/paisajes3d.jpg" filter="url(#feColorMatrix)" />
</svg>

TypeDefinición

Matrix

Utiliza la matriz pasada a través del atributo values compuesta de 20 valores separados por espacios y que se interpretan como 4 vectores de 5 elementos cada uno. El primer vector será para definir los rojos, el segundo definirá los verdes, el tercero los azules y el cuarto se utilizará como valor alfa.

Saturate

Sólo necesita de un número real comprendido entre 0 y 1 pasado a través del atributo values. El valor 0 se interpretará como desaturar y 1 como la imagen con el color original.

HueRotate

Sólo necesita un valor comprendido entre 0 y 360 pasado a través del atributo values. El valor de 0 no tendrá efecto en la imagen y el valor 180 será el equivalente a invertir los colores.

LuminanceToAlpha

Hace el efecto de Negativo. El atributo values no es aplicable.