h5中svg滤镜实现火焰或水波效果的核心是用生成动态噪声纹理，再通过进行像素级位移扰动；水波用turbulence类型+微调basefrequency模拟起伏，火焰用fractalnoise+多层叠加+色彩矩阵模拟色温过渡。
在 H5 中用 SVG 滤镜实现火焰燃烧或水波扭曲，核心不是“贴图动画”，而是利用 <feturbulence></feturbulence> 生成动态噪声纹理，再通过 <fedisplacementmap></fedisplacementmap> 将其作用于目标图形，产生像素级位移——这种基于物理建模的扰动方式，比 CSS 动画或 GIF 更轻量、更可控，也更易与交互绑定。
水波扭曲：基础结构 + 动态 baseFrequency
水波效果依赖低频、缓慢变化的噪声。关键在于让 baseFrequency 随时间轻微浮动，模拟水面自然起伏：
- 在隐藏
<svg></svg>中定义滤镜，<feturbulence></feturbulence>的type="turbulence"（非 fractalNoise）更适合水波的连贯感 -
baseFrequency="0.015 0.02"是起始值，x/y 分量可略有差异，避免规律性条纹 - 用 JavaScript 每帧微调这两个值：例如 x 方向加
0.0008 * cos(t)，y 方向加0.0012 * sin(t)，t 为递增帧数 -
<fedisplacementmap></fedisplacementmap>的scale控制扭曲强度，建议设为 12–25；xChannelSelector="G"、yChannelSelector="B"可让不同通道驱动不同方向，增强流动错觉
火焰燃烧：高频噪声 + 多层叠加 + 色彩干预
火焰需要更躁动、分形感更强的扰动，并配合颜色渐变和透明度变化：
- 改用
type="fractalNoise"，numOctaves="3"增加细节层次，baseFrequency="0.04 0.06"提升活跃度 - 叠加两套
<feturbulence></feturbulence>：一套慢速大波（主形态），一套快速小噪点（边缘闪烁），用<femerge></femerge>合并后作为 displacement 输入 - 在 displacement 前插入
<fecolormatrix type="matrix"></fecolormatrix>，将噪声图的绿色通道提亮、蓝色通道压暗，模拟火焰上部偏黄、底部偏橙红的色温过渡 - 最终用
<fecomposite operator="in"></fecomposite>把扭曲后的图形限制在原始火焰形状内，避免溢出失真
性能与兼容性要点
这类动态滤镜在移动端易卡顿，必须主动优化：
- 禁用
feDisplacementMap的动画在滚动容器或列表项中；只对静止区域（如 banner、图标、卡片封面）启用 - 给
<filter></filter>显式设置x="-30%" y="-30%" width="160%" height="160%"，防止模糊/位移被默认裁剪区域截断 - Chrome/Firefox/Safari 支持完整，但 Android WebView（尤其旧版）可能不支持
feDisplacementMap动画；可用if (SVGElement.prototype.hasAttribute)简单检测后降级为 CSSfilter: blur(2px) - 避免每帧都调用
setAttributeNS修改多个属性；把baseFrequency拼成单字符串再写入，减少 DOM 操作开销
最小可运行示例（水波）
复制以下代码到 HTML 文件即可看到实时水波倒影：
<script><br> const turb = document.querySelector('#water feTurbulence');<br> let t = 0;<br> function animate() {<br> t += 0.02;<br> const x = 0.015 + 0.0008 * Math.cos(t);<br> const y = 0.02 + 0.0012 * Math.sin(t * 0.7);<br> turb.setAttribute('baseFrequency', `${x} ${y}`);<br> requestAnimationFrame(animate);<br> }<br> animate();<br> </script>
