svg : feColorMatrix 滤镜（二）

马黑黑 · 发表于 2023-10-26 21:48

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-10-26 21:54 编辑

rgba 颜色表达体系中，r=red，g=green，b=blue，a=alpha，即 “红+蓝+绿+透明” 的组合。任何一种表达出来的颜色，都可以分解为 rgba 的分量，比如纯红色表示为 rgba(255,0,0,1)，纯绿色表示为 rgba(0,255,0,1)，纯蓝色表示为 rgba(0,0,255,1)。这里，0 表示对应的 rgb 参与颜色的组成分量为 0 即没有，255 表示以最高的分量参与颜色的组成，而 a 作为透明度通道数值，为 1 时表示完全不透明，为 0 是表示完全透明。

feColorMatrix 滤镜，当使用 type="matrix" 时，其 values 值以 rgba 为运算机制，形成如下矩阵雏形：

r	g	b	a

g

b

a

然后，rgba 每一个成员又都有自己的 rgba 通道，以第一行为例，rr 表示 red→red，rg 表示 red→green，rb 表示 red→blue，ra 表示 red→alpha；意为，在 red 通道里，再用一定分量的 rgba 构成红色通道。其余各行依此类推。注意，第一列的rr、第二列的gg、第三列的bb、第四列的aa 分别代码 rgba 自身。于是，矩阵构成是如下这样子：

rr	rg	rb	ra

gr	gg	gb	ga

br	bg	bb	ba

ar	ag	ab	aa

这是 4*4 的矩阵，它还要加入一列表示常量偏移，变成 4*5 的结构：

rr	rg	rb	ra	c1

gr	gg	gb	ga	c2

br	bg	bb	ba	c3

ar	ag	ab	aa	c4

例如，什么都不做的颜色矩阵变换函数 values 值：

1	0	0	0	0

0	1	0	0	0

0	0	1	0	0

0	0	0	1	0

上例，第一行是 red（rr）的表达，第二行是 green（gg）的表达，第三行是 blue（bb）的表达，第四行是 alpha（aa）的表达，所使用的全是系数，取值范围通常都是 0 ~ 1，0 表示在该行中颜色变化的分量为 0，1 表示颜色的变化为 100%（不过，为了突出某种颜色的分量，系数可以大于 1）。上面所列的这个 values 值不会对作用对象做任何改变，因为它保持最基本的颜色形态，但是，假如改动任何一个矩阵数值，情形就大不同！以下，给出一个演示例子，两个矩形开始时一样，当改变 feColorMatrix 滤镜的 values 任意一个数值后点击“查看效果”按钮，看看第二个矩形有什么变化：

【附】feColorMatrix type 为 matrix 时的代码样式：

<svg>
	<filter id="f1">
		<feColorMatrix id="feMatrix" type="matrix"
			values="
				1 0 0 0 0
				0 1 0 0 0
				0 0 1 0 0
				0 0 0 1 0
			" />
	</filter>
</svg>