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>
Type | Definició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. |