feComposite是SVG滤镜中需显式指定in/in2/operator/result的灵活图层混合原语，必须嵌于内、依赖前置输出源，且最终结果须被引用或作为末环节才可见。
直接说结论：feComposite 是 SVG 滤镜里最灵活的“图层混合开关”，但它不自动叠加——你得明确指定哪两层（in 和 in2）、用什么规则（operator）、输出到哪（result），否则什么也看不到。
为什么 feComposite 总是没反应？
常见错误不是写错语法，而是漏掉三个隐性前提：
- 它必须嵌在
in2所需的输入源（比如 -
in和in2必须都指向已声明的图像源：要么是"SourceGraphic"，要么是其他原语用result命名的中间结果 - 如果想让最终效果显示出来，
feComposite的输出必须被后续某个原语（如femerge）引用，或它本身就是滤镜链最后一环且未被覆盖
operator 选哪个才对？
不同 operator 值对应完全不同的像素逻辑，不能靠猜：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
over：最常用，上层覆盖下层（支持透明度），等价于常规图层叠加。适合阴影盖在原图上 -
in：只保留in2的不透明区域，in的内容只在该区域内显示。适合做 alpha 遮罩，比如把发光效果限制在文字轮廓内 -
out：和in相反，只保留in2的透明区域，in显示在“空洞”里 -
atop：in显示在in2上，但in2的不透明部分会遮住in—— 类似“蒙版擦除” -
arithmetic：需要配k1/k2/k3/k4四个系数，实现加色、减色、线性插值等数学混合，但兼容性弱（Safari 对k4支持不稳定）
怎么把多个图形真正“叠”起来？
feComposite 一次只能处理两个输入，要叠三层以上，必须链式调用或配合 femerge：
- 链式：先
feComposite in="A" in2="B" result="AB"，再feComposite in="AB" in2="C" result="ABC" - 更推荐用
femerge：把 A、B、C 分别存为result，然后在femerge里按顺序列femergenode—— 它默认就是over合成，语义清晰、层级可控 - 注意：
feComposite operator="in"之后的结果若直接进femerge，可能因 alpha 通道被裁切而变黑；建议先用feComponentTransfer拉回亮度，或改用atop+ 调整in2的 opacity
容易被忽略的坑
实际调试时，80% 的问题出在看不见的“透明区域”和“坐标偏移”上：
-
feFlood默认铺满整个滤镜区域（filterUnits="objectBoundingBox"下是 0–1），但feOffset出来的图形可能超出边界，导致feComposite计算时部分像素为空白（即全透明黑色） -
SourceAlpha是原始图形的 alpha 通道灰度图，不是带颜色的轮廓；想用它做遮罩，记得接feFlood+feComposite operator="in"给它上色 - 所有
result名不能重复，也不能用保留字如"SourceGraphic"或"BackgroundImage"—— 浏览器会静默忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
