feDisplacementMap各属性值作用加深理解实例页面

效果：

scale变化(0-200)：

代码：

HTML代码：

<svg class="svg-filters">
    <defs>
        <filter id="filter-ripple">
            <feImage xlink:href="./grad/map.png" x="0" y="0" width="256" height="256" result="ripple"></feImage>
            <feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="80"></feDisplacementMap>
            <feComposite operator="in" in2="ripple"></feComposite>
        </filter>
    </defs>
</svg>
<svg width="256" height="192" style="outline:1px dotted;">
    <image xlink:href="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" width="256" height="192" filter="url(#filter-ripple)"></image> 
</svg>