SVG滤镜：feComponentTransfer

feComponentTransfer滤镜的主要作用为每个像素点颜色的转换，包括亮度、对比度、色彩平衡的调整等。

其采用的方法为对每一个颜色通道进行独立的操作。

feComponentTransfer拥有四个子元素：

feFuncR、feFuncG、feFuncB、feFuncA，

分别对输入值的红色、绿色、蓝色与透明度四个通道的值进行数值处理。

四个子元素包括以下常用属性：

type：每一个通道下数值处理的方法类型。

取值：identity / table / discrete / linear /gamma。

identity：颜色值不变化。

table：颜色值根据提供的tableValues值进行转变。

tableValues为n个值，v0，v1，...，vn-1，0=< v <= 1，值从v0到vn-1依次增大，将颜色通道分为n-1个范围。

如：

<span style="white-space:pre"></span><feFuncR type="table" tableValues="0.0 0.7 0.9 1.0" />

tableValues共有四个值，原始红色通道别划分为3个范围： 0.00 -- 0.33 ，0.33 -- 0.66 ， 0.66 -- 1.00。

我们给出的tableValues的值将红色通道重新划分为3个范围： 0.00 -- 0.70，0.70 -- 0.90，0.90 -- 1.00。

当输入值为 0.5 时，0.5为原始通道中第二个范围（0.33 -- 0.66） 范围的中间值，对应到新的通道范围的第二个范围（0.70 -- 0.90）的中间值 0.80，则0.80为输出值。

w3c官方文档给出的计算公式为：

k/n <= C < (k+1)/n， 则C' = v_k + (C - k/n)*n * (v_k+1 - v_k)，其中C为输入，C'为输出，若C=1，C'=v_n。

discrete：类似table的颜色值计算方法，根据tableValues计算处理颜色值。

区别：tableValues的值可以不是依次增大的，通道划分的范围多一个。

同样，根据tableValues的值的数量，将原始通道划分不同范围。

例如：

<span style="white-space:pre"></span><feFuncR type="discrete" tableValues="0.0 0.7 0.0 1.0" />

原始红色通道别划分为4个范围： 0.00 -- 0.25 ，0.25 -- 0.50 ， 0.50 -- 0.75，0.75 -- 1.00。

我们给出的值将通道划分为：0.00 -- 0.00，0.70 -- 0.70，0.00 -- 0.00，1.00 -- 1.00。

当输入值为0.375时，为原始通道第二个范围的值，因此对应到新的通道范围的第二个范围值：0.70，即为输出值。

w3c官方文档提供的计算方法为：

k/n <= C < (k+1)/n，则C' = v_{k，当C=1时，C' = vn-1。}

_{linear：线性方式转换颜色数值。}

_{参数：slope、intercept。}

_{w3c官方文档提供的计算方法为：}

 C' = slope * C + intercept。

gamma：使用gamma函数进行颜色数值处理。

参数：amplitude，exponent，offset

w3c官方文档提供的计算方法为：

C' = amplitude * pow(C, exponent) + offset

示例代码、达到的效果请参阅参考文献。这里不贴了。

参考文献：http://www.w3.org/TR/SVG/filters.html#feComponentTransferElement

https://docs.webplatform.org/wiki/svg/elements/feComponentTransfer