svg滤镜介绍及制作黏合、水波等效果

前言

张鑫旭，旭哥最近出了一本《css世界》的书，很佩服旭哥的认真钻研能力，css研究的很透彻，融入了很多自己观点和css是世界观。本文svg滤镜，主要开始于旭哥新书网站cssworld.cn ,网站购买按钮黏合效果很是吸引我。研究了一下，旭哥正是用了svg滤镜的一些效果！翻阅其博客，发现他前段时间也有文章介绍了这个效果。好吧，既然旭哥对这个效果已经做了介绍，那么今天我对这几个效果再简单介绍一下，并融入下自己的一些观点。

黏合效果

效果如下：

核心代码解释

本代码运用了css 的checkbox来控制按钮动画显示和隐藏 ，关于这一点，我之前也有文章介绍过，请点击链接，查看第15条！关于css，我这里就不多解释了！下面主要解释一下黏合代码svg

<svg width="0" height="0">
      <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 19 -9" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
      </defs>
    </svg>

为什么加了这段代码，再加一段

filter: url("#goo");

就可以实现黏合效果了呢？

主要是svg的几个滤镜起了作用：

1、feGaussianBlur 模糊滤镜

<svg width="230" height="120">
 <defs>
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
  </defs>
</svg>

上面定义了一个模糊滤镜，我们可以通过如下方法让一个div模糊

<div style="width:50px;height:50px;border-radius: 50%;background-color:green;filter: url(#blurMe);"></div>

同理feColorMatrix、feComposite 都是一个道理，三个融合再一个，就可以生成类似黏合的效果！

具体效果解释，可以参考文档：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix

水波效果

水波效果一般用如下svg滤镜

<svg width="256" height="192">
  <defs>
    <radialGradient id="rg" r=".9"> 
      <stop offset="0%" stop-color="#f00"></stop>
      <stop offset="10%" stop-color="#000"></stop>
      <stop offset="20%" stop-color="#f00"></stop>
      <stop offset="30%" stop-color="#000"></stop>
      <stop offset="40%" stop-color="#f00"></stop>
      <stop offset="50%" stop-color="#000"></stop>
      <stop offset="60%" stop-color="#f00"></stop>
      <stop offset="70%" stop-color="#000"></stop>
      <stop offset="80%" stop-color="#f00"></stop>
      <stop offset="90%" stop-color="#000"></stop> 
      <stop offset="100%" stop-color="#f00"></stop>
    </radialGradient>                        
    <rect id="witness" width="256" height="192" fill="url(#rg)"></rect>

     <filter id="filter-ripple">
          <feImage result="pict2" xlink:href="#witness" x="0" y="0" width="256" height="192"></feImage>
          <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="R" in2="pict2" in="SourceGraphic">
       </feDisplacementMap>
    </filter>    
  </defs>
</svg>

关于这一点，旭哥也写了，这里就不多累赘了！具体请看他的文章，关键是feImage的实现，旭哥使用canvas把经典的水波映射图绘制在画布上，然后转换成base64地址，赋予元素的xlink:href属性！

演示代码如下：

水波效果其他实现方案

目前关于水滴特效也有基于WebGL的，用jquery实现的插件，

具体请看：http://resource.haorooms.com/softshow-29-278-1.html