svg : feColorMatrix 滤镜

马黑黑

feColorMatrix 滤镜用于实现图像矩阵变换。它可以通过 type 属性 ① 饱和度（saturate）、② 色环旋转（hueRotate）、 ③ 阿尔法亮（luminanceToAlpha）和 ④ 矩阵函数（matrix）在原图基础上以像素为单位生成新的颜色从而改变原图。除了阿尔法亮度没有 values 属性，其实三个 type 属性值均需要设置 values 属性与之配合，其中：

① type="saturate" values="0.5" <!-- 饱和度，values 值取值范围在 0 ~ 1 之间 -->
② type="hueRotate" values="180" <!-- 色环旋转，values 值取值范围在 0 ~ 360 之间 -->
③ type="luminanceToAlpha" <!-- 阿尔法亮度没有 values 值 -->
④ type="matrix" values="..." <!-- 矩阵函数，values 值是一个 4*5 的矩阵方程 -->

下面，给出一幅图片，并演示前三种 type 属性值的效果，第四种 matrix 函数将另外开帖说明。先看 feColorMatrix 滤镜的核心代码，演示效果放在代码之后：

<filter id="f1">
	<feColorMatrix in="SourceGraphic" type="saturate | hueRotate | luminanceToAlpha | matrix" values="number" />
</filter>

原图

一、饱和度 ：type="saturate" values="0.5"

values :

二、色环旋转 ：type="hueRotate" values="0.5"

values :

三、阿尔法亮度 ：type="luminanceToAlpha" （没有 values 值）

马黑黑

饱和度的 values 值除了可以使用浮点数表示，也可以用百分比。

马黑黑

色环旋转的 values 值，可以超过360度，但超过没有意义，超过的值总是被看成是 360 的余数。

红影

这个好，还能在线自己调整，直接观看图像颜色的矩阵变化中的饱和度和色相的变化效果

红影

阿尔法亮度没有 values 值，这个本身就是被预设好的吧？

红影

最好的是哪个色相在线调整，本来之前的按钮怎么变色还有点不清楚，现在看到这个，更能知道在原本颜色下，调整后是怎样变化了

马黑黑

红影 发表于 2023-10-25 21:04
最好的是哪个色相在线调整，本来之前的按钮怎么变色还有点不清楚，现在看到这个，更能知道在原本颜色下，调 ...

这个和CSS的 filter: hueRotate(度数) 完全一样

红影

马黑黑 发表于 2023-10-25 22:35
这个和CSS的 filter: hueRotate(度数) 完全一样

正好原图里有两种颜色，可以观察色相变化下的效果了。

马黑黑

红影 发表于 2023-10-25 23:46
正好原图里有两种颜色，可以观察色相变化下的效果了。

可以设计一个包括明显的红绿蓝颜色的图案用于测试

红影

马黑黑 发表于 2023-10-26 07:28
可以设计一个包括明显的红绿蓝颜色的图案用于测试

嗯嗯，这个注意不错

马黑黑

红影 发表于 2023-10-26 13:32
嗯嗯，这个注意不错

这容易看得出来

红影

马黑黑 发表于 2023-10-26 22:46
这容易看得出来

是的，可以有更直接的感受。

红影

等等，为什么这个帖子不用写哪个4*5的矩阵，可以直接调？感觉有点迷糊。

马黑黑

红影 发表于 2023-10-27 11:08
等等，为什么这个帖子不用写哪个4*5的矩阵，可以直接调？感觉有点迷糊。

type值共有四个，只有 type="matrix" 时，values 值才必须是矩阵的

马黑黑

红影 发表于 2023-10-27 11:05
是的，可以有更直接的感受。

是的

红影

马黑黑 发表于 2023-10-27 12:50
type值共有四个，只有 type="matrix" 时，values 值才必须是矩阵的

哦哦，事务自己没看清楚原文，不好意思

红影

马黑黑 发表于 2023-10-27 12:50
是的

颜色里居然分这么细的操作呢，想不到。

马黑黑

红影 发表于 2023-10-27 15:53
颜色里居然分这么细的操作呢，想不到。

你拿到的颜色，红色，绿色，蓝色，它们实际上都有自己的rgba四个通道，理论上，这些通道里，以红色为例，rr 为 1，rg 为 0，rb 为 0，ra 为 0，意思是说，gba 不参与 R' 的合成，这就是红色 red。

马黑黑

红影 发表于 2023-10-27 15:53
哦哦，事务自己没看清楚原文，不好意思

feColorMatrix 分两节讲，第二节专讲 type="matrix“ 时的 values 值

红影

马黑黑 发表于 2023-10-27 20:48
你拿到的颜色，红色，绿色，蓝色，它们实际上都有自己的rgba四个通道，理论上，这些通道里，以红色为例， ...

嗯嗯。这些的取值都是0到1吧？