趁热打铁,SVG feColorMatrix滤镜gogogo!

这篇文章发布于 2024年11月11日,星期一,00:17,归类于 SVG相关。 阅读 1174 次, 今日 7 次 2 条评论

 

占位封面图颜色滤镜

一、趁热打铁gogogo

上一篇我们介绍了Pixi.js中的颜色矩阵变换滤镜,接下来,我们趁热打铁,来一起学习下SVG中的colorMatrix滤镜,使用的是<feColorMatrix>这个元素。

先从语法说起。

支持in, typevalues(注意有s)这三个属性,其中,in属性的实际用法都是固定的,值都是SourceGraphic,表示应用滤镜的原始资源。

在CSS调用场景中,就是应用该CSS的对应元素。

主要是type属性的区别,参见:

<!-- 饱和度变化 -->
<feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />

<!-- 色调变化 -->
<feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />

<!-- 发光亮度变化 -->
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />

<!-- 矩阵变化 -->
<feColorMatrix
    in="SourceGraphic"
    type="matrix"
    values="1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 1 0" 
/>

其中,饱和度和色调变化比较简单,这个在CSS中的filter属性中也有对应的滤镜方法,分别是filter:saturate()filter:hue(),效果是一样的,关键是后面两个滤镜。

下面好好说道说道。

二、luminanceToAlpha的作用和效果

luminanceToAlpha的作用是亮度透明化,白色会完全透明,黑色保持不变,其余黑灰半透明,类似传统胶卷的影印效果。

说到亮度,讲一个小tips,就是Luminance亮度和Brightness亮度的区别。

前者指的是光源投射在物体表面的发光强度,后者表示物体本身的明亮程度。

例如,镜子的镀膜反光后很亮,但是本身却是银色的,并不是那么明亮。

先看实际渲染效果,HTML和CSS代码如下:

<svg width="0" height="0">
  <defs>
    <filter id="colorMeLTA">
      <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
    </filter>
  </defs>
</svg>
  
<img src="1.jpg" width="256">
img {
  filter: url(#colorMeLTA);
}

结果在白底背景下的效果示意:

luminanceToAlpha效果示意

原图对比:

如果我们给图片的背景区域增加其他颜色,我们就能看到透明和本透明的部分:

增加背景色后的效果示意

眼见为实,您可以狠狠地点击这里:luminanceToAlpha颜色变换滤镜效果demo

由于luminanceToAlpha效果颇为诡异,如果不是为了营造恐怖效果,日常开发较少使用,但是其对应的渲染效果,大家还是要在心中有个印象的。

三、深入理解matrix矩阵语法

下面好好讲讲更有学习难度的matrix矩阵变换与滤镜效果。

矩阵变换大家大学应该都学过,线性代数必修。

如果没学过,这部分内容会吃力一点,可以直接跳过去,到时候想要什么效果,去网上搜对应的矩阵值即可(本文也提供了几个常见的滤镜效果给大家参考)。

理解颜色变换矩阵

<feColorMatrix>元素的type属性如果是"matrix",那么对应的values属性值则是一个4×5(4行5列)的一串数值。

实际上,颜色矩阵变换是5×5的。

ColorMatrix1=1; 0; 0; 0; 0
ColorMatrix2=0; 1; 0; 0; 0
ColorMatrix3=0; 0; 1; 0; 0
ColorMatrix4=0; 0; 0; 1; 0
ColorMatrix5=0; 0; 0; 0; 1

不过最后一行表示占位符,在SVG中并不认这个,因此,是4行5列,如果你写成5行,是不解析渲染的。

回到这里,values属性值可以一排展示,使用英文逗号分隔为4段,例如:

<filter id="colorMatrix">
  <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
</filter>

不过,为了便于理解与学习,建议学习阶段,大家可以以网格的排版呈现,示意(可以无需逗号,有也没事):

<feColorMatrix
    in="SourceGraphic"
    type="matrix"
    values="1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0" 
/>

其计算规则如下所示:

| 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 |

其中,右上角有个丿的R、G、B、A表示最终的颜色计算结果。

以红色计算举例:

R'    =      r1 * R    +     r2 * G     +     r3 * B     +      r4 * A      +    r5
新红色 = [ r1 * 原图红 ] + [ r2 * 原图绿 ] + [ r3 * 原图蓝 ] + [ r4 * 原图透明 ] + [ r5偏移 ]

以默认矩阵变换值计算举例:

/* R G B A 1 */
   1 0 0 0 0   // R = 1*R + 0*G + 0*B + 0*A + 0
   0 1 0 0 0   // G = 0*R + 1*G + 0*B + 0*A + 0
   0 0 1 0 0   // B = 0*R + 0*G + 1*B + 0*A + 0
   0 0 0 1 0   // A = 0*R + 0*G + 0*B + 1*A + 0

更形象的计算示意图:

矩阵变换示意图

各参数实时演示

为了方便大家学习,弄了个在线页面,取值范围-1~1,可以感受下各个数值改变对图像渲染效果的影响,对应的矩阵坐标也会实时输出,大家复制就可以直接使用了。

您可以狠狠地点击这里:feColorMatrix元素matrix实时生成与预览工具

例如,页面中的滑杆我随便拖动几个,就有类似下图的渲染效果,对应的SVG滤镜代码可以在文本域中进行复制。

矩阵参数值生成与预览工具页面截图

四、一些常见滤镜对应的矩阵

1. 100%灰度滤镜效果

矩阵参数示意:

<filter id="colorMatrixGrayscale">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    .333 .333 .333 0 0
    .333 .333 .333 0 0
    .333 .333 .333 0 0
    0 0 0 1 0" 
  />
</filter>

参考渲染效果:

2. 反相效果

这个简单,初始值都从1变成-1,同时偏移设为1补足即可,如下:

<filter id="colorMatrixInvert">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    -1 0 0 0 1
    0 -1 0 0 1
    0 0 -1 0 1
    0 0 0 1 0" 
  />
</filter>

参考渲染效果:

反相效果示意

使用CSS invert()函数渲染效果参见,感觉细节差异还是挺明显的,可能算法上有区别:

3. RGB颜色转为BGR

<filter id="colorMatrixBGR">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    0 0 1 0 0
    0 1 0 0 0
    1 0 0 0 0
    0 0 0 1 0" 
  />
</filter>

效果参考:

RGB互相替换效果示意

4. 褐色

<filter id="colorMatrixSepia">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
    0.393  0.768  0.188  0  0 
    0.349  0.685  0.167  0  0 
    0.272  0.533  0.130  0  0 
    0  0  0  1  0" 
  />
</filter>

效果参考:

5. Polaroid颜色效果

<filter id="colorMatrixPolaroid">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
     1.438 -0.062 -0.062 0 0
    -0.122 1.378 -0.122 0 0
    -0.016 -0.016 1.483 0 0
    -0.03 0.05 -0.02 1 0" 
  />
</filter>

效果参考:

拍立得效果示意

更多效果可参见演示页面,您可以狠狠地点击这里:常见SVG颜色变换滤镜的Matrix值demo

五、结语

哎呀,太晚了,今儿个就不结语了。

参考文章

https://juejin.cn/post/6943032791122575390
https://fecolormatrix.com/
https://docs.rainmeter.net/tips/colormatrix-guide/

OK,就这些,我还是学到不少东西的,你呢?

欢迎 ~

❤️🧡💛💚💙

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. liuliu说道:

    酸酸甜甜就是你

  2. 啦啦啦说道:

    👍