svg滤镜详解之feDisplacementMap滤镜

我们前面讲述的svg的各种滤镜，有图像模糊，添加阴影，修改图像颜色，增加光照，图像合成叠加滤镜。前面的滤镜均不会改变像素自身的位置。feDisplacementMap滤镜是修改像素的位置。常见的应用是为元素添加水波为效果。这篇文章通过一步一步带大家通过实现水波纹效果，来认识这个滤镜。先上效果：

下面来讲一下具体的实现。feDisplacementMap滤镜是使用一个输入源的颜色值，对另外一个输入源的元素位置进行像素平移。feDisplacementMap滤镜的语法：scale:平移比例比例越大，平移距离就越大。in:需要改变元素位置的输入源。in2:使用该输入的颜色值改变in输入的位置。xChannelSelector:x轴的使用的偏移颜色可取值R,G,B,A。yChannelSelector:y轴的使用的偏移颜色可取值R,G,B,A。俗话说纸上得来空觉浅，绝知此事要躬行，下面我们通过实例来一起研究一下这个属性。 下面我们使用：

这个图片对我们的风景图片：

<svg width="500" height="300"><defs> <filter id="filter-ripple"><feImage result="pict2" xlink:href="../img/water.png" ></feImage><feDisplacementMapscale="20"color-interpolation-filters="sRGB" xChannelSelector="R" yChannelSelector="R"in="SourceGraphic" in2="pict2"></feDisplacementMap></filter></defs><image xlink:href="../img/fj.png" x="0" y="0" width="500" height="300" style="filter:url(#filter-ripple)"></image