.target {
   filter: url("#goo");
}

结果这两个圆滚滚的球靠近的时候，就相互融合在一起了，效果如下截图：

眼见为实，若PC电脑，您可以狠狠的点击这里：两个小球拖拽融合demo

拖动右边的圆球，靠近左边这一个，可以看到融合效果。

二、SVG粘滞融合效果的一些局限

此效果虽然很酷，实现也很简单。当下还是有一些局限的：

1. 浏览器兼容性的问题，IE是不支持的，这其实没什么，当作渐进增强效果来处理就好了。但麻烦的是Safari浏览器，以及iPhone上微博或微信内置浏览器，虽然支持普通HTML元素应用SVG filter滤镜，但是，对于这里的融合效果滤镜，虽然有明显的bug，会有一些意想不到的样式表现。因此，如果希望把这个效果用在面向广大群众基础的产品上的时候，目前而言需要做类似下面处理：

   var ua = navigator.userAgent;
   if (/Safari|iPhone/i.test(ua) && /chrome/i.test(ua) == false) {
       document.body.classList.add('nofilter');
   }

   然后CSS这样写：

   body:not(.nofilter) .target {
      filter: url("#goo");
   }

   或者使用SVG来实现我们的效果，例如这里的球如果使用SVG元素绘制的话，包括IE浏览器在内，都有不错的效果。

2. 此效果只适用于圆形元素。因为此效果的原理其实是：先让图形高斯模糊，再使用feColorMatrix滤镜增加alpha透明通道的对比度，于是可以把高斯模糊重合的部分进行合并，形成融合效果；最后使用feComposite滤镜的operator属性的atop值让原始的图形在上面显示。

   对于方形元素而言，就会出现问题，因为其四角边缘因为高斯模糊而变弯了，于是使用feColorMatrix滤镜alpha通道增强的时候，四边的直角会变成圆角，类似这样：

   感觉元素一下子浮肿了。

   如果元素原本就是个正圆，则没有这个问题，融合效果最好，因为正圆的高斯模糊它是均匀的。

3. 应用滤镜的容器元素的尺寸要足够放下子元素。

三、SVG粘滞融合分享菜单实战

您可以狠狠地点击这里：带有融合粘滞效果的分享小交互demo

点击分享，就会出现常见社交分享按钮，然后相互间粘滞，同时分享按钮还会抖三抖，效果参见下面Gif：

实现步骤如下：

1. 粘贴SVG滤镜代码（人人都会）；
2. 定位几个圈圈，同时加个transition过渡（原本就会）；
3. 容器设置filter: url("#goo")（简单）；
4. 点击时候几个圈圈重新换个位置；

此时粘滞效果就有了！

为了效果更佳灵动，我们还可以给分享按钮加一个小动画，我们可以从animate.css项目找一个合适的CSS3动画效果，例如jello，拷贝相关CSS代码，添加在分享按钮上。

于是就有了点击分享按钮，分享按钮弹几下，同时里面粘滞出现3个具体分析圈圈。

纯HTML和CSS实现，没有任何JS的参与！

兼容Chrome和Firefox浏览器，对于不支持的浏览器，就是普通的圈圈出现效果，也还不错哦！

低成本，高收益，还不速速用起来。

四、结束语

生命不息，研究不止，对于普通元素，Safari的融合渲染效果比较糟糕，而SVG元素filter属性滤镜则支持效果挺好。那我们是不是可以借助SVG forginObject元素来让Safari等现代浏览器都效果棒棒哒呢！

SVG forginObject元素可以在SVG中直接嵌套完整HTML片段，之前有文章专门介绍过：“SVG 简介与截图等应用”，是非常强的一个元素。

于是整了一段HTML代码测试：