学习前提知识：
1. SVG滤镜
2. 颜色矩阵滤镜 ColorMatrix
2.1 矩阵
你需要知道矩阵之间是如何相乘的，也就是线性代数中，矩阵相乘的点乘法，具体可参考阮一峰的理解矩阵乘法
2.2 颜色矩阵
详细可参考：颜色矩阵原理
这里需要注意：
RGBA值是从上到下书写,最后一个值为颜色偏移值。
-
此图中的 [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 xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
这个SVG Filter 进行了三个操作：
- 进行Blur 虚化
- 进行颜色矩阵滤镜，仅更改了Alpha值，作用是过滤低Alpha值的像素，如alpha值为 50 ， 那么有resultAlpha= （5018）- 7255 , 此时 resultAlpha<0，（其实会变为0）那么此时低Alpha值的像素点会变成透明，达到过滤效果，以增强对比度。
- 使用 feBlend 或 feComposite 使得其中包含的子元素不受第一步的Blur影响。
那么把需要进行滤镜的元素或者父元素套上这段css
.element-container{
filter:url('#goo');
}
注意要点
- 性能问题 , 此项操作涉及到密集资源运算，所以最好注意使用的场合。
- 兼容性问题，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
