使用SVG渐变作为feImage实现水波效果实例页面

效果：

代码：

HTML代码：

<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>
  <use xlink:href ="#witness" />
</svg>

<svg width="256" height="192">
    <image xlink:href="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" width="256" height="192" filter="url(#filter-ripple)"></image> 
</svg>