feblend 是 svg 滤镜中实现像素级混合的核心元素，通过指定 in（上层）、in2（下层）输入源和 mode（如 multiply、screen 等）在滤镜坐标系内可控合成，不依赖图层顺序或 z-index。
feBlend 是 SVG 滤镜中实现图像像素级混合的核心元素，它不依赖图层堆叠顺序，也不受 z-index 干扰，而是通过明确指定两个输入源（in 和 in2）与混合算法（mode），在滤镜坐标系内完成可控合成。预览效果的关键，在于理解输入源的层级关系、模式的数学逻辑，以及浏览器对不同 mode 的实际支持程度。
输入源决定谁在上、谁在下
feBlend 的混合结果高度依赖 in 与 in2 的赋值顺序：in 是“上层”，in2 是“下层”。这和 Photoshop 图层面板中的上下关系一致，但和 CSS 的 mix-blend-mode（作用于自身与下方元素）逻辑不同。
-
SourceGraphic：原始 SVG 元素（如
、 ），常作 in 或 in2 -
BackgroundImage：页面背景（需启用
filter: url(#id)的元素背后的真实背景），适合做 in2 实现“透过效果” -
自定义中间结果：用
result="xxx"命名前序滤镜输出（如），再在 feBlend 中引用，可构建多步合成链 - 注意：
in="f1" in2="f2"与in="f2" in2="f1"效果通常完全相反，比如 multiply 下黑底白字 vs 白底黑字结果差异极大
常用 mode 的视觉行为与适用场景
每种 mode 对应特定的像素计算公式，直接影响明暗、对比与色彩倾向。实际预览时建议优先验证基础模式，再拓展高级模式。
- multiply：逐通道相乘（c = a × b），压暗画面，适合阴影叠加、纹理压印或深色主题融合
- screen：反向相乘后取反（c = 1 − (1−a)×(1−b)），提亮画面，常用于光晕、雪景叠加、高光增强
- overlay：自动判断像素亮度，暗区用 multiply、亮区用 screen，能同时保留阴影细节与高光层次，适合增强图像对比度
- darken / lighten：逐像素取较小/较大值，不涉及色彩运算，适合蒙版对齐、轮廓提取或简单遮罩合成
- 慎用
color-dodge、soft-light等高级模式：Chrome/Firefox 支持良好，但 Safari（尤其旧版本）可能静默降级为 normal，需提供视觉回退
组合滤镜链提升预览可控性
单一 feBlend 很难达到理想效果，通常需前置处理（模糊、偏移、着色）再混合。预览阶段建议分步调试，用 result 命名中间结果便于定位问题。
- 做投影：先
，再 - 做玻璃拟态：先
+ ，再 ，最后用 - 做文字纹理：用
，再 ，避免直接覆盖原色
兼容性与调试要点
现代浏览器（Chrome 45+、Firefox 35+、Edge 79+、Safari 16.4+）对基础 mode 支持稳定，但预览时仍需关注三点：
- 滤镜区域默认裁剪：设置
filterUnits="userSpaceOnUse"并扩大width/height/x/y属性，避免偏移或模糊被截断 - 透明度影响显著：feBlend 对 alpha 通道参与运算，半透图形混合后可能产生意外灰阶，可先用
调整透明度曲线 - 无法用 CSS 变量动态切换 mode：若需交互切换，必须用 JS 替换整个 filter 定义或切换不同预设滤镜 ID
