使用SVG Filter 制作粘滞（Gooey）的效果笔记思路

学习前提知识：

1. SVG滤镜

2. 颜色矩阵滤镜 ColorMatrix

2.1 矩阵

你需要知道矩阵之间是如何相乘的，也就是线性代数中，矩阵相乘的点乘法，具体可参考阮一峰的理解矩阵乘法

2.2 颜色矩阵

详细可参考：颜色矩阵原理

这里需要注意：

1. RGBA值是从上到下书写,最后一个值为颜色偏移值。

2. 此图中的 [R, G, B, A, 1] 中的 1 应该为 255 ，
   可以在此网站进行验证：svg-color-filter
   

   

   image.png

拉动Matrix中第一行第五列，也就是控制结果R值的偏移值时
可以直观感受到 ， 当偏移值≥1的时候，恒等于1的效果。

resultR = 1 * srcR + 0 * srcG + 0 * srcB + 1 * 255;

说明了，偏移值是以基数乘于255进行加减的。

颜色矩阵.png

2.3 颜色矩阵滤镜

Gooey 粘滞的效果

Gooey Animation.gif

Live DEMO :https://codepen.io/lbebber/pen/OPjxZL

原理分析

可参考教程 ： https://css-tricks.com/gooey-effect/

具体实现

先来看一下这个SVG：

这个SVG Filter 进行了三个操作：

1. 进行Blur 虚化
2. 进行颜色矩阵滤镜，仅更改了Alpha值，作用是过滤低Alpha值的像素，如alpha值为 50 ， 那么有resultAlpha= （5018）- 7255 , 此时 resultAlpha<0，（其实会变为0）那么此时低Alpha值的像素点会变成透明，达到过滤效果，以增强对比度。
3. 使用 feBlend 或 feComposite 使得其中包含的子元素不受第一步的Blur影响。

那么把需要进行滤镜的元素或者父元素套上这段css

.element-container{
      filter:url('#goo');
}

注意要点

1. 性能问题 , 此项操作涉及到密集资源运算，所以最好注意使用的场合。
2. 兼容性问题，IE/Edge系不支持. Firefox/Chrome等主流浏览器才兼容。

参考资料：

相关教程：
颜色矩阵原理
The Gooey Effect-CSSTricks
Creative-Gooey-Effect-Tympanus

相关DEMO:
https://codepen.io/CosPie/pen/zbZKxg
https://tympanus.net/Development/CreativeGooeyEffects/send.html