这组代码,svg 宽高均为 0,因为我们不需要显示它,我们将使用的仅是它里面的滤镜。滤镜 id 标识是 f1,内有两个滤镜:第一个滤镜是柏林噪声滤镜 feTurbulence,此前我们已经做了介绍;第二个滤镜是今天的主角,feDisplacementMap 滤镜,in2缺省,默认使用上文滤镜做置换源,in 指向目标图形即使用滤镜者的图形(in="SourceGraphic"),扭曲度为80,(像素点的)X坐标在 RGBA 通道中选择 G 通道进行位置偏移(xChannelSelector)、Y坐标则选择了 R 通道(yChannelSelector)。然后,这个滤镜,总体效果应用到 HTML 的 img 标签中,效果如下: