为何大dx值的<feOffset>会导致位移映射滤镜消失？

问题成因 #

这是浏览器对SVG滤镜内部纹理坐标的浮点数精度限制导致的。当feOffset的dx值超过8000-12000的临界范围时，湍流滤镜生成的纹理坐标会超出浏览器能处理的精度范围，feDisplacementMap无法正确解析这些超范围的坐标数据，因此停止渲染。而湍流滤镜仅负责生成噪声图案，不涉及与源图形的坐标映射计算，所以仍能正常滚动显示。

解决方法 #

1. 用湍流参数动态修改替代大偏移量 #

放弃使用feOffset做超大位移，通过JS动态调整feTurbulence的参数来模拟滚动效果，完全避开坐标精度问题。示例代码：

const turbElement = document.getElementById('turb');
let baseFreq = 0.001;

setInterval(() => {
  baseFreq += 0.0001;
  turbElement.setAttribute('baseFrequency', baseFreq.toString());
}, 50);

这种方式是让噪声图案自身“流动”，而非偏移整个纹理，视觉效果一致且无精度限制。

2. 限制偏移量并循环重置 #

如果必须使用feOffset，可以设置临界值，当dx达到阈值时重置为0，同时调整湍流滤镜的seed参数保证视觉连续性：

const offsetElement = document.querySelector('feOffset');
const turbElement = document.getElementById('turb');
let dx = 0;
const MAX_DX = 8000; // 根据实际测试的临界值调整

setInterval(() => {
  dx += 100;
  if (dx > MAX_DX) {
    dx = 0;
    // 重置seed避免重复图案
    turbElement.setAttribute('seed', Math.random().toString());
  }
  offsetElement.setAttribute('dx', dx.toString());
}, 50);

3. 切换滤镜坐标单位 #

将滤镜的filterUnits从objectBoundingBox改为userSpaceOnUse，并设置对应的绝对像素范围，能提升精度处理的上限（虽仍有阈值，但范围更大）。修改后的滤镜代码：

<filter id="displacementFilter" filterUnits="userSpaceOnUse" x="-200" y="-50" width="1200" height="600">
    <feTurbulence id="turb" type="turbulence" baseFrequency="0.001" numOctaves="5" result="turb1"/>
    <feOffset in="turb1" result="offset" /> 
    <feDisplacementMap in2="offset" in="SourceGraphic" scale="100" xChannelSelector="R" yChannelSelector="G" result="disp1"/>
</filter>

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