颜色滤镜,用来对原图每个像素点的RGBA颜色进行处理生成新的RGBA颜色。
元素有两个常用属性:type与values。
type属性:存在 matrix / saturate / hueRotate / luminanceToAlpha 四个属性值。
matrix:通过矩阵计算改变颜色值。
此时values取值为一串4行5列的矩阵值,values="a00 a01 a02 a03 a04 a10... a34"。具体运算规则为:
| R' | | a00 a01 a02 a03 a04 | | R | | G' | | a10 a11 a12 a13 a14 | | G | | B' | = | a20 a21 a22 a23 a24 | * | B | | A' | | a30 a31 a32 a33 a34 | | A | | 1 | | 0 0 0 0 1 | | 1 |
矩阵第一行控制红色通道,第二行控制绿色通道,第三行控制蓝色通道,最后一行控制透明度通道。
saturate:控制颜色饱和度,values取值 0~1。
等价于:
| R' | |0.213+0.787s 0.715-0.715s 0.072-0.072s 0 0 | | R | | G' | |0.213-0.213s 0.715+0.285s 0.072-0.072s 0 0 | | G | | B' | = |0.213-0.213s 0.715-0.715s 0.072+0.928s 0 0 | * | B | | A' | | 0 0 0 1 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |
hueRotate:色相变换,values取值为一个角度值。
等价于:
| R' | | a00 a01 a02 0 0 | | R | | G' | | a10 a11 a12 0 0 | | G | | B' | = | a20 a21 a22 0 0 | * | B | | A' | | 0 0 0 1 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |
其中
| a00 a01 a02 | [+0.213 +0.715 +0.072] | a10 a11 a12 | = [+0.213 +0.715 +0.072] + | a20 a21 a22 | [+0.213 +0.715 +0.072] [+0.787 -0.715 -0.072] cos(hueRotate value) * [-0.213 +0.285 -0.072] + [-0.213 -0.715 +0.928] [-0.213 -0.715+0.928] sin(hueRotate value) * [+0.143 +0.140-0.283] [-0.787 +0.715+0.072]
luminanceToAlpha:转换为灰度图,values不存在。
等价于:
| R' | | 0 0 0 0 0 | | R | | G' | | 0 0 0 0 0 | | G | | B' | = | 0 0 0 0 0 | * | B | | A' | | 0.2125 0.7154 0.0721 0 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |
https://docs.webplatform.org/wiki/svg/elements/feColorMatrix