fecomposite是svg滤镜中专用于图层合成的核心原语，需显式指定in/in2/operator/result，必须嵌于内、依赖前置输出源，且结果须被引用或作为末环节才可见。
feComposite 是 SVG 滤镜链里真正“做合成”的核心原语，但它不是一键叠加的按钮——它像一个精密的图层开关，必须明确告诉它：哪两层参与、怎么混合、结果存哪儿、后续谁来用。用对了，阴影、遮罩、发光、内凹、多色渐变轮廓都能稳稳实现；用错了，画面就一片黑或完全没反应。
必须满足的三个前提条件
很多效果“不显示”，问题不在 operator 选错，而在基础链路断了：
- feComposite 必须写在
标签内部，不能单独存在 - 它的 in 和 in2 必须指向已定义的图像源：要么是 "SourceGraphic"（原始图形），要么是前面某个原语用 result 命名的中间输出（比如
） - 它的输出要能被看见：要么它是滤镜链最后一环（且未被后续原语覆盖），要么它的 result 被后续原语（如
或另一个 ）显式引用
operator 选型决定视觉逻辑
不同 operator 不是风格差异，而是像素级运算规则，直接决定“哪里显、哪里隐、怎么算”：
- over：上层盖下层，支持透明度。最常用，适合阴影盖在原图上、发光叠在文字外
- in：只保留 in2 的不透明区域，in 的内容仅在此区域内可见。本质是 alpha 遮罩，比如把模糊光晕限制在文字轮廓内
- out：和 in 相反，in 显示在 in2 的透明区域（即“挖空”效果），适合做镂空文字或边缘留白
- atop：in 显示在 in2 上，但 in2 的不透明部分会盖住 in。类似“蒙版擦除”，常用于让背景纹理只透出在图形边缘
- arithmetic：用 k1–k4 系数做线性混合（i1×k1 + i2×k2 + k3 + i1×i2×k4）。可模拟加色、减色、淡入淡出，但 Safari 对 k4 支持不稳定，慎用于生产环境
三层及以上图形的可靠叠加法
feComposite 一次只处理两个输入。想叠三图（比如原图 + 阴影 + 发光），有两种主流方式：
-
链式调用：先
，再 。逻辑清晰，但容易因中间 result 的 alpha 被裁切导致变暗（尤其用过 in/out 后） -
femerge 推荐方案：分别生成 A、B、C 并设不同 result（如 result="base" / "shadow" / "glow"），然后用
按顺序列 。它默认按 over 合成，层级直观、alpha 安全、调试友好
高频踩坑与应对技巧
实际调试时，看不见效果往往卡在两个隐形细节上：
-
坐标越界：
可能让阴影移出滤镜区域（默认 filterUnits="objectBoundingBox" 下是 0–1 范围），导致 feComposite 计算时 in2 部分为全透明黑色。解决：扩大 filter 的 x/y/width/height，或改用 filterUnits="userSpaceOnUse" -
SourceAlpha 不是彩色轮廓：它是原始图形的灰度 alpha 通道，纯黑底+白形。想用它做金色遮罩？得接
+ ，否则只会得到灰色剪影 - in="SourceAlpha" 后变黑：因为 SourceAlpha 自身无颜色信息。务必在它之后接填充色（feFlood）或颜色变换（feColorMatrix），再合成
