<feDisplacementMap> 是用位移图的RGB值经归一化与scale缩放后，驱动源图像素在x/y方向偏移，实现扭曲等效果；红/绿通道默认控X/Y偏移，scale=0无变形，需指定in、in2、scale，兼容主流浏览器。
SVG 的 <feDisplacementMap> 不是位移“映射”，而是用一张图（位移图）的像素值来偏移另一张图（源图）的像素位置，从而产生扭曲、浮雕、水波等动态视觉效果。 它属于 SVG 滤镜（<filter>）中的一个原语，核心在于“用 A 图驱动 B 图的形变”，不是传统纹理贴图或坐标映射。
位移图怎么影响源图像素？
位移图（in2）每个像素的 R、G、B 值会被转换为归一化浮点数（0–1），再按 scale 缩放，最终作为水平（x）和垂直（y）方向的偏移量：
-
dx = (R - 0.5) × scale（红色通道控制 X 方向偏移） -
dy = (G - 0.5) × scale（绿色通道控制 Y 方向偏移） - 蓝色通道（B）默认被忽略，除非设置
xChannelSelector="B"或yChannelSelector="B" -
scale=0表示无偏移；scale越大，扭曲越剧烈（也可能导致边缘裁剪）
关键属性与实用配置
必须显式指定的有：in（源图）、in2（位移图）、scale；常用可选属性：
-
xChannelSelector/yChannelSelector：指定用哪个颜色通道驱动 X/Y 偏移（R/G/B/A），默认分别是R和G -
result：为该滤镜步骤命名，供后续滤镜步骤引用 - 位移图尺寸最好与源图一致；若不一致，SVG 会自动缩放/平铺，可能引入插值模糊或重复纹样
常见视觉效果实现思路
不需要 JS 就能做出基础动态感，结合 CSS 动画或 SMIL 更灵活：
立即学习“前端免费学习笔记（深入）”；
-
水面波动：用渐变+噪声滤镜生成动态灰度图作位移图，
scale设为 2–8，xChannelSelector="R"、yChannelSelector="G" -
浮雕/压印：位移图用源图自身 + 高斯模糊（
<feGaussianBlur>）生成明暗过渡，scale控制立体感强度（常取 1–4） -
文字凹凸：将文字转为路径后用
<feOffset>制作阴影层，再用该阴影层作为in2，增强深度错觉 -
交互扭曲：用
<feTurbulence>+<feDisplacementMap>组合，通过 CSS 自定义属性（--scale）绑定scale，配合 hover 或 pointermove 实时更新
注意事项与兼容性
该滤镜在所有现代浏览器中支持良好（Chrome 4+、Firefox 4+、Safari 5.1+、Edge 12+），但需注意：
- 位移图若含透明区域（alpha
- 过度大的
scale值会导致像素超出画布边界而消失，可用<feComponentTransfer>预处理位移图，限制值域 - 滤镜默认渲染区域为
filterUnits="objectBoundingBox"（相对尺寸），如需像素级精准控制，设为userSpaceOnUse并明确指定width/height/x/y
