filter SVG滤镜水波荡漾的效果实例页面

展示

代码

• HTML：

  <svg style="position:absolute;height:0;clip:rect(0 0 0 0);">
    <defs>
      <filter id="filterRipple">
        <feImage xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/png;base64,..." x="-95" y="-167" width="512" height="512" result="ripple"></feImage>
        <feDisplacementMap xChannelSelector="G" yChannelSelector="R" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="0"></feDisplacementMap>
        <feComposite operator="in" in2="ripple"></feComposite>
        <feComposite in2="SourceGraphic"></feComposite>
      </filter>
    </defs>
  </svg>
  
  <button id="button" type="button" class="ui-button ui-button-primary">点击我</button>
  
  <!-- 图片 -->
  <p><img id="img" src="1.jpg"></p>

• CSS：

  button, img {
      filter: url(#filterRipple);
  }