svg : feColorMatrix 滤镜
本帖最后由 马黑黑 于 2023-10-25 19:34 编辑 <br /><br /><style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.zs { color: green; }
.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; }
.vals { color: red; }
.Range { display: flex; align-items: center; gap: 6px; }
</style>
<div class="ma">
<svg style="position: absolute;">
<filter id="saturate">
<feColorMatrix id="matrSatu" type="saturate" values="0.5" />
</filter>
<filter id="hueRotate">
<feColorMatrix id="matrHue" type="hueRotate" values="180" />
</filter>
<filter id="luAlpha">
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha"/>
</filter>
</svg>
<p>feColorMatrix 滤镜用于实现图像矩阵变换。它可以通过 type 属性 ① 饱和度（saturate）、② 色环旋转（hueRotate）、 ③ 阿尔法亮（luminanceToAlpha）和 ④ 矩阵函数（matrix）在原图基础上以像素为单位生成新的颜色从而改变原图。除了阿尔法亮度没有 values 属性，其实三个 type 属性值均需要设置 values 属性与之配合，其中：</p>
<pre>
① type="<span class="rred">saturate</span>" values="<span class="rred">0.5</span>" <span class="zs"><!-- 饱和度，values 值取值范围在 0 ~ 1 之间 --></span>
② type="<span class="rred">hueRotate</span>" values="<span class="rred">180</span>" <span class="zs"><!-- 色环旋转，values 值取值范围在 0 ~ 360 之间 --></span>
③ type="<span class="rred">luminanceToAlpha</span>" <span class="zs"><!-- 阿尔法亮度没有 values 值 --></span>
④ type="<span class="rred">matrix</span>" values="<span class="rred">...</span>" <span class="zs"><!-- 矩阵函数，values 值是一个 4*5 的矩阵方程 --></span>
</pre>
<p>下面，给出一幅图片，并演示前三种 type 属性值的效果，第四种 matrix 函数将另外开帖说明。先看 feColorMatrix 滤镜的核心代码，演示效果放在代码之后：</p>
<pre>
<filter id="f1">
<feColorMatrix in="SourceGraphic" type="saturate | hueRotate | luminanceToAlpha | matrix" values="number" />
</filter>
</pre>
<p>原图</p>
<p><img class="mypic" alt="" src="https://638183.freep.cn/638183/t23/btn/fl2.jpg" /></p>
<p>一、饱和度 ：type="saturate" values="<span class="vals">0.5</span>"</p>
<p><img class="mypic" alt="" src="https://638183.freep.cn/638183/t23/btn/fl2.jpg" style="filter: url(#saturate);" /></p>
<p class="Range">
<label for="satu">values : </label>
<input id="satu" type="range" min="0.1" max="1" step="0.1" value="0.5" />
</p>
<p>二、色环旋转 ：type="hueRotate" values="<span class="vals">0.5</span>"</p>
<p><img class="mypic" alt="" src="https://638183.freep.cn/638183/t23/btn/fl2.jpg" style="filter: url(#hueRotate);" /></p>
<p class="Range">
<label for="hue">values : </label>
<input id="hue" type="range" min="1" max="360" step="1" value="180" />
</p>
<p>三、阿尔法亮度 ：type="luminanceToAlpha" （没有 values 值）</p>
<p><img class="mypic" alt="" src="https://638183.freep.cn/638183/t23/btn/fl2.jpg" style="filter: url(#luAlpha);" /></p>
</div>
<script>
let vals = document.querySelectorAll('.vals');
console.log(vals);
satu.oninput = () => {
matrSatu.setAttribute('values',satu.value);
vals.innerText = satu.value;
};
hue.oninput = () => {
matrHue.setAttribute('values',hue.value);
vals.innerText = hue.value;
};
</script>
饱和度的 values 值除了可以使用浮点数表示，也可以用百分比。 色环旋转的 values 值，可以超过360度，但超过没有意义，超过的值总是被看成是 360 的余数。 这个好，还能在线自己调整，直接观看图像颜色的矩阵变化中的饱和度和色相的变化效果{:4_187:} 阿尔法亮度没有 values 值，这个本身就是被预设好的吧？ 最好的是哪个色相在线调整，本来之前的按钮怎么变色还有点不清楚，现在看到这个，更能知道在原本颜色下，调整后是怎样变化了{:4_173:} 红影 发表于 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
可以设计一个包括明显的红绿蓝颜色的图案用于测试
嗯嗯，这个注意不错{:4_187:} 红影 发表于 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 值才必须是矩阵的
哦哦，事务自己没看清楚原文，不好意思{:4_173:} 马黑黑 发表于 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吧？