feturbulence本身不输出可见纹理，而是生成位移场或灰度噪声图，需配合fecolormatrix、fecomposite或fedisplacementmap才能显形；默认type="turbulence"输出不可见向量，type="fractalnoise"虽输出灰度但范围[0,1]易被截断；必须指定result并传入后续可渲染节点；basefrequency控制主频尺寸（如云朵用0.01–0.02），numoctaves决定层次（推荐值2），须设stitchtiles="stitch"防接缝；转纹理需三步：fecolormatrix转高对比灰度、fecomposite线性叠加、作用于background-image层；兼容性上safari对numoctaves>2和非零seed支持差，应固定seed="0"，滤镜定义需width="0" height="0" style="display:none"，且不可用于canvas 2d。
feTurbulence 本身不输出“纹理图像”，它输出的是**带坐标的噪声位移场或灰度噪声图**——直接用它填充背景，你会看到一片黑或灰，不是噪点。必须配合 feColorMatrix、feComposite 或 feDisplacementMap 才能显形。
为什么feTurbulence单独用没效果
默认 type="turbulence" 生成的是位移向量（非颜色），result 输出不可见；type="fractalNoise" 虽输出灰度值，但默认范围是 [0,1]，在多数滤镜链中会被截断或混入透明通道而不可见。常见错误是只写：
<feturbulence type="fractalNoise" basefrequency="0.05"></feturbulence>
——这不会在页面上显示任何东西，因为没指定 result，也没把它作为输入传给后续可渲染的滤镜节点。
baseFrequency 和 numOctaves 怎么设才像自然纹理
这两个参数决定噪声的“物理尺度感”。设错就会像马赛克或水波纹，而不是云、雾、纸纹：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
baseFrequency控制主频尺寸：胶片颗粒用0.002 0.003，云朵用0.01 0.02，粗纸纹用0.04 0.06；两个值不等（如"0.045 0.038"）能制造各向异性，更自然 -
numOctaves决定层次丰富度：设为1看起来单薄平滑；2是通用甜点值；3+在 Safari 和低端 Android 上易卡顿，且可能过载细节 - 必须加
stitchTiles="stitch"，否则大块背景边缘会出现明显接缝（尤其用background-size: cover时）
怎么把噪声变成可见的纹理层
核心思路：把 feTurbulence 的输出转成可控灰度图，再混合到颜色层。三步不能少：
- 用
feColorMatrix把噪声转成高对比灰度：values="0.33 0.33 0.33 0 0 ..."（Luminance 转换），再通过k4偏移和k3缩放控制明暗范围 - 用
feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0"实现线性叠加，比multiply或screen更稳定，不依赖背景色明暗 - 滤镜必须作用于
background-image层，而非整个元素——否则文字/边框全糊。推荐用background-image: url("data:image/svg+xml,...")内联注入，避免额外请求和布局干扰
容易被忽略的兼容性陷阱
看似简单的滤镜，在真实环境里掉坑率极高：
- Chrome 和 Firefox 支持
feTurbulence完整，但 Safari 对numOctaves > 2或seed非零的支持不稳定，建议固定seed="0" -
filter: url(#xxx)作用于<div> 会触发整个元素重绘（含子内容），性能差且破坏语义；只该用于伪元素或纯背景层 <li>所有 <code><svg></svg>滤镜定义必须设width="0" height="0" style="display:none"，否则可能意外参与文档流，导致空白占位或滚动异常 - 不要用
ctx.filter = "url(#xxx)"试图在 Canvas 2D 中调用——Canvas 的filter属性只认 CSS 函数（如blur()），完全忽略 SVG 滤镜
真正难的不是拼出滤镜代码，而是理解 feTurbulence 不是“贴图生成器”，它是“噪声引擎”：输出的是数学场，不是像素图。你得亲手把它导向颜色、混合、位移三个不同出口，才能落地成云、纸、颗粒或雾。
