svg : feColorMatrix 滤镜（二）
本帖最后由 马黑黑 于 2023-10-26 21:54 编辑 <br /><br /><style>.mydiv { margin-top: 10px; width: 300px; height: 120px; background: linear-gradient( to right, red, green, blue); }
#stage { filter: url(#f1); }
.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.ma > svg { position: absolute; }
</style>
<div class="ma">
<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>
<p>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 是表示完全透明。</p>
<p>feColorMatrix 滤镜，当使用 type="matrix" 时，其 values 值以 rgba 为运算机制，形成如下矩阵雏形：</p>
<pre>
r g b a
g
b
a
</pre>
<p>然后，rgba 每一个成员又都有自己的 rgba 通道，以第一行为例，rr 表示 red→red，rg 表示 red→green，rb 表示 red→blue，ra 表示 red→alpha；意为，在 red 通道里，再用一定分量的 rgba 构成红色通道。其余各行依此类推。注意，第一列的rr、第二列的gg、第三列的bb、第四列的aa 分别代码 rgba 自身。于是，矩阵构成是如下这样子：</p>
<pre>
rr rg rb ra
gr gg gb ga
br bg bb ba
ar ag ab aa
</pre>
<p>这是 4*4 的矩阵，它还要加入一列表示常量偏移，变成 4*5 的结构：</p>
<pre>
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
</pre>
<p>上例，第一行是 red（rr） 的表达，第二行是 green（gg） 的表达，第三行是 blue（bb）的表达，第四行是 alpha（aa）的表达，所使用的全是系数，取值范围通常都是 0 ~ 1，0 表示在该行中颜色变化的分量为 0，1 表示颜色的变化为 100%（不过，为了突出某种颜色的分量，系数可以大于 1）。上面所列的这个 values 值不会对作用对象做任何改变，因为它保持最基本的颜色形态，但是，假如改动任何一个矩阵数值，情形就大不同！以下，给出一个演示例子，两个矩形开始时一样，当改变 feColorMatrix 滤镜的 values 任意一个数值后点击“查看效果”按钮，看看第二个矩形有什么变化：</p>
<div class="mydiv"></div>
<div id="stage" class="mydiv"></div>
<pre id="mVals" contenteditable="true">
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0
</pre>
<p><input id="btnReset" type="button" value="恢复默认" /> <input id="btnOk" type="button" value="查看效果" /></p>
<p><br><br>【附】feColorMatrix type 为 matrix 时的代码样式：</p>
<pre>
<svg>
<filter id="f1">
<feColorMatrix id="feMatrix" type="matrix"
values="<span class="rred">
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0</span>
" />
</filter>
</svg>
</pre>
</div>
<script>
let val = mVals.innerText;
btnReset.onclick = () => {
mVals.innerText = val;
feMatrix.setAttribute('values', mVals.innerText);
};
btnOk.onclick = () => feMatrix.setAttribute('values', mVals.innerText);
</script>
一楼的演示，我们可以很简单地拿掉红蓝绿中的任意一种颜色。想一想怎么做？ 提示：零点几可以写成
.5 马黑黑 发表于 2023-10-26 21:55
一楼的演示，我们可以很简单地拿掉红蓝绿中的任意一种颜色。想一想怎么做？
斜向的那些个1就是对应每行的颜色啊，变0就行了吧{:4_173:}
哦，试了一下，要得到单一颜色，还得把对应的c变1才行
这个挺难的，4*4 的矩阵还好理解，第五列常量偏移是偏移什么的？它的取值范围是多少？ 代码写起来也难，要把这些数字都写上去啊{:4_173:} 红影 发表于 2023-10-26 22:54
斜向的那些个1就是对应每行的颜色啊，变0就行了吧
哦，试了一下，要得到单一颜色，还得把对应 ...
多试试感受一下 红影 发表于 2023-10-26 22:57
代码写起来也难，要把这些数字都写上去啊
values 值是这么写的 红影 发表于 2023-10-26 22:55
这个挺难的，4*4 的矩阵还好理解，第五列常量偏移是偏移什么的？它的取值范围是多少？
都是系数值。常量偏移，可以顾名思义，加重改行所表达的通道颜色 马黑黑 发表于 2023-10-26 23:43
多试试感受一下
嗯嗯，去试了几个数字，感觉很多都不是意料中的。 马黑黑 发表于 2023-10-26 23:44
values 值是这么写的
这个属于最直接的调整吧。 马黑黑 发表于 2023-10-26 23:53
都是系数值。常量偏移，可以顾名思义，加重改行所表达的通道颜色
嗯嗯，这样能涵盖所有的颜色值了吧。 红影 发表于 2023-10-27 13:31
嗯嗯，这样能涵盖所有的颜色值了吧。
不是涵盖。这是表示当行所代表的颜色加重。 红影 发表于 2023-10-27 13:30
嗯嗯，去试了几个数字，感觉很多都不是意料中的。
这说明你对矩阵乘法还不是很掌握 红影 发表于 2023-10-27 13:30
这个属于最直接的调整吧。
直接不直接我不知道，原理就如帖子所解释的 马黑黑 发表于 2023-10-27 20:52
不是涵盖。这是表示当行所代表的颜色加重。
我没表达清楚，我是说这个矩阵，不是说c值{:4_173:} 马黑黑 发表于 2023-10-27 20:53
这说明你对矩阵乘法还不是很掌握
我对颜色的变化也不够了解{:4_173:} 马黑黑 发表于 2023-10-27 20:54
直接不直接我不知道，原理就如帖子所解释的
嗯嗯，知道了{:4_204:} 红影 发表于 2023-10-27 23:59
嗯嗯，知道了
{:4_190:} 红影 发表于 2023-10-27 23:59
我对颜色的变化也不够了解
一切都彼此有关联。知识的缺陷，令学习增加难度。