feComponentTransfer
El elemento <feComponentTransfer>
permite modificar cada componente RGBA
(R – rojo, G – verde, B – azul, A – alfa ) de cada pixel.
Dentro del elemento <feComponentTransfer>
aparecen anidados los elementos:
<feFuncR>
- define la función de transferencia para el rojo
<feFuncG>
- define la función de transferencia para el verde
<feFuncB>
- define la función de transferencia para el azul
<feFuncA>
- define la función de transferencia para el componente alfa
La presencia de todos estos elementos no es obligatoria.
En todos estos sub-elementos aparece el atributo type
que define el tipo de función de transferencia aplicada.
El atributo type
puede tomar como valor una de estas palabras clave:
type = "identity | table | discrete | linear | gamma"
identity
Si type="identity"
el componente RGBA queda sin modificar.
linear
Si type = "linear"
el nuevo valor del componente RGBA
C = slope * c + intercept
Donde:
slope es el valor del atributo slope
( slope = pendiente ). Si el atributo slope
no esta especificado su valor se considera 1.
c es el valor inicial del componente RGBA
intercept es el valor del atributo intercept
. Si el atributo intercept
no esta especificado su valor se considera 0.
A continuación dos ejemplos: a la izquierda slope="0.5"
, y la imagen aparece oscurecida. A la derecha slope="1.5"
, y la imagen aparece más clara, como iluminada.
En el siguiente ejemplo la imagen aparece iluminada y con tonos rojizos, ya que en el caso del componente rojo slope = "3"
.
Recordemos la fórmula que utilizamos para calcular el componente RGBA modificado:
C = slope * c + intercept
Donde
slope es el valor del atributo slope
,
c es el valor inicial del componente RGBA
y
intercept es el valor del atributo intercept
.
En el siguiente ejemplo como que intercept
tiene valores negativos algunas zonas aparecen muy oscurecidas incluso negras ( si C == 0 ).
table
El atributo type="table"
permite dividir los valores de cada componente de color en una serie de intervalos iguales,
y redimensionar cada intervalo en parte.
Si el atributo type="table"
tenemos que especificar también el atributo tableValues
: una lista con los valores modificados de cada intervalo. Los valores aparecen separados por un espacio o una coma.
En el siguiente ejemplo el atributo tavleValues
de <feFuncB>
es una lista de 5 valores:
tableValues= "0, 0.1, 0.7, 0.9, 1"
lo que quiere decir que el filtro divide los valores iniciales del azul en cinco intervalos iguales, y los cambia por los valores modificados según detallamos en la siguiente tabla:
valores iniciales | valores modificados |
---|---|
0.00 - 0.20 | 0 |
0.20 - 0.40 | 0 - 0.1 |
0.40 - 0.60 | 0.1 - 0.7 |
0.60 - 0.80 | 0.7 - 0.9 |
0.80 - 1.00 | 0.9 - 1 |
Podemos invertir una imagen utilizando type="table"
y tableValues="1 0"
.
Si manipulamos solo el componente alfa de una imagen ( <feFuncA>
) obtenemos una imagen semitransparente ( en el siguiente ejemplo 50% opacidad )
discrete
Si el atributo type="discrete"
tenemos que especificar también el atributo tableValues
: una lista con los valores modificados de cada intervalo. Los valores aparecen separados por un espacio o una coma.
tableValues="0 0.2 0.6 0.8 1"
En el siguiente ejemplo exactamente como en el caso de type="table"
el filtro divide los valores iniciales del color en cinco intervalos iguales, solo que esta vez los cambia por un único valor. En consecuencia la imagen aparece posterizada.
valores iniciales | valor del intervalo |
---|---|
0.00 - 0.20 | 0 |
0.20 - 0.40 | 0.2 |
0.40 - 0.60 | 0.6 |
0.60 - 0.80 | 0.8 |
0.80 - 1.00 | 1 |
gamma
Podemos aplicar una corrección gamma del color, utilizando type="gamma"
. Si type = "gamma"
el filtro calcula el nuevo valor del componente RGBA
: C utilizando esta fórmula:
C = amplitude * cexponent + offset
Donde:
amplitude es el valor del atributo amplitude
. Si el atributo amplitude
no esta especificado su valor se considera 1.
c es el valor inicial del componente RGBA
exponent ( exponent = potencia ) es el valor del atributo exponent
. Si el atributo exponent
no esta especificado su valor se considera 1.
offset es el valor del atributo offset
. Si el atributo offset
no esta especificado su valor se considera 0.