学习前提知识：

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等主流浏览器才兼容。

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