SVG滤镜效果增强：feTurbulence实现波纹与杂点背景-H5教程-PHP中文网

feturbulence本身不输出颜色图像，只生成位移向量或极淡灰度噪声，必须通过fecolormatrix增强对比、fecomposite叠加到底色、并绑定到可视元素才能显形；需设result属性、stitchtiles="stitch"防接缝、basefrequency推荐"0.03 0.008"、numoctaves=2，且seed="0"确保兼容性。

svg滤镜效果增强：feturbulence实现波纹与杂点背景

直接用 feTurbulence 画不出波纹或杂点背景——它本身不输出颜色图像，只生成位移向量或极淡的灰度噪声。要看到真实纹理，必须把它“转译”成可见层。

为什么单独写 feTurbulence 没反应

常见错误是只放这一行：

这不会显示任何东西，原因有三：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

没设 result 属性：滤镜输出必须命名（如 result="noise"），否则后续节点无法引用
没接渲染链：type="turbulence" 输出的是 XY 位移向量；type="fractalNoise" 虽输出灰度，但默认值域 [0,1] 在多数上下文中会被截断为纯黑或不可见灰
没作用到可视元素上：滤镜定义后，必须用 filter="url(#id)" 显式绑定到 <rect></rect>、<g></g> 或 CSS 的 background-image 层

调出波纹感的关键参数

波纹效果依赖频率与方向性，不是越乱越好：

baseFrequency 推荐 "0.03 0.008"：X 方向稍密制造横向流动感，Y 方向拉长模拟水波延展
numOctaves = 2：1 层太单调，3 层易糊边且 Safari 兼容差；2 层足够表现起伏节奏
务必加 stitchTiles="stitch"：防止大尺寸背景出现明显拼接缝，尤其用 background-size: cover 时
type 固定用 "fractalNoise"：比 turbulence 更平滑，更适合模拟水面、热浪、空气扰动

把噪声变成可铺满的杂点背景

三步闭环才能稳定出图：

第一步：转高对比灰度 用 <fecolormatrix in="noise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 25 -12" result="dots"></fecolormatrix> 这里 k3=25 拉伸对比，k4=-12 下压整体亮度，让噪点从灰雾变清晰颗粒
第二步：线性叠加到底色 <fecomposite in="SourceGraphic" in2="dots" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></fecomposite> 不用 multiply 或 screen，避免受底色明暗干扰，确保黑底白点、白底黑点都清晰
第三步：滤镜挂载方式要对 若用于 HTML 元素背景，SVG 滤镜需定义在 <defs></defs> 中，再通过 CSS filter: url(#id) 调用；若用于 SVG 内部图形，直接给 <rect></rect> 加 filter="url(#id)" 即可