颜色矩阵滤镜

前端教程SVG

<feColorMatrix> 颜色矩阵滤镜通过把每一个像素的颜色值 [red, green, blue, alpha] 都乘以一个变换矩阵来修改图层。

原理解释

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | × | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1  |   | 1 |

即：
R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5

如以上变换公式：

• 假设输入图片中某个像素值为 [R, G, B, A]，
• 给定的矩阵为 [r1，r2，......，a5]，
• 则变换后的像素值为 [R'，G'，B'，A']

基本语法

<filter id="myFilter">
  <feColorMatrix id="feColorMatrix" type="matrix" values="..."/>
</filter>

• type="matrix(默认) | saturate | hueRotate | luminanceToAlpha"
  • matrix 通过变换矩阵来修改像素的颜色，矩阵在 values里定义；
  • saturate 色彩饱和度
  • hueRotate 色调旋转角度
  • luminanceToAlpha 把色彩强度转换为透明程度
• values 根据 type 的不同，取值和意义不同
  • 当 type="matrix" 时，values 默认值为单位矩阵（identity matrix，即没有变化），格式为 r1 r2 r3 r4 r5 g1 g2 g3 ...... a4 a5 这 20 个数值
  • 当 type=saturate 时，values 默认值为 1(没有变化)，取值 0~正实数
  • 当 type="hueRotate 时，values 默认值为 0(没有变化)，取值 0~360
  • 当 type="luminanceToAlpha" 时，values 无效。

示例

通过下面的 codepen 来直观感受一下：

• [R G B A 1] 为某个像素的原始颜色值，[r1 r2 r3 ...] 为变换矩阵，[R' G' B' A' 1] 为变换后的颜色值

新窗口打开