SVG Filter使用feImage作为feDisplacementMap输入失效问题咨询

单向生效的核心原因 #

这个问题是SVG滤镜处理外部映射图的两个常见实现特性导致的：

• 你的<feImage>标签没有显式设置宽高和坐标，加载的网格映射图默认会按原始尺寸渲染，和你设定的300x300滤镜区域不匹配。当in2设为heatmap时，实际参与位移计算的区域刚好是映射图的中性色区域（R=128、G=128），这个值对应的位移量为0，所以看起来完全没有效果。
• 另一个隐性影响因素是SVG滤镜默认采用线性RGB空间计算颜色值，你用的JPG格式映射图属于sRGB色彩空间，直接转换后的通道值会出现偏移，进一步削弱了位移效果。

而你互换in和in2后能生效，是因为此时in2是作为SourceGraphic的比格犬图，它的尺寸和滤镜区域完全匹配，色彩空间也适配，所以可以正常生成位移效果，只是扭曲对象变成了网格图。

修复方案 #

给<feImage>补充显式的尺寸、坐标声明，再指定色彩空间即可正常实现需求：

<svg width="300" height="300">
  <filter id="a" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="300">
    <!-- 补充x/y/width/height和色彩空间属性 -->
    <feImage xlink:href="映射图地址" result="heatmap" x="0" y="0" width="300" height="300" color-interpolation-filters="sRGB"/>
    <feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="G" in2="heatmap" in="SourceGraphic"/>
  </filter>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="比格犬图片地址" height="300" width="300" filter="url(#a)" />
</svg>

修改后原参数就能正常生效，实现用网格图扭曲比格犬的预期效果。

内容的提问来源于stack exchange，提问作者Alibasher