FeMerge 是 SVG 滤镜中用于按序叠加多个滤镜结果的合成元素，必须嵌套于内且仅含子元素，顺序决定图层上下关系，支持外发光、内阴影与原图分层合成。
FeMerge 是 SVG 滤镜中专门用于“合并多个滤镜效果”的关键元素，它本身不生成图像，而是按顺序把前面定义的 <femergenode></femergenode> 所引用的滤镜结果逐层叠加（类似图层合成），从而实现阴影+模糊+发光+色彩调整等多重效果的一体化呈现。
FeMerge 的基本结构和工作逻辑
它必须嵌套在 <filter></filter> 内部，且只能包含 <femergenode></femergenode> 子元素。每个 <femergenode></femergenode> 通过 in 属性指定要合并的输入源（如 "SourceGraphic"、"blur"、"shadow" 等），顺序决定图层上下关系：排在前面的 <femergenode></femergenode> 在下方，后面的在上方。
-
in="SourceGraphic"表示原始图形（最底层） -
in="blur"或自定义结果名需先由<fegaussianblur></fegaussianblur>等滤镜用result属性声明 - 合并时默认使用“over”合成模式（上层覆盖下层，支持透明度）
典型组合：内阴影 + 外发光 + 原图
以下是一个常见实用案例：给文字或图标添加柔和内凹感（内阴影）和柔和外光晕（外发光），再叠回原图：
<filter id="glowAndInset"> <!-- 外发光：模糊白色填充 --> <feFlood flood-color="#fff" result="white"/> <feComposite in="white" in2="SourceAlpha" operator="in" result="flooded"/> <feGaussianBlur in="flooded" stdDeviation="3" result="glow"/> <p><!-- 内阴影：反向模糊+位移+颜色 --> <feOffset dx="0" dy="1" result="offset"/> <feGaussianBlur in="offset" stdDeviation="1" result="insetBlur"/> <feFlood flood-color="#000" flood-opacity="0.3" result="shadowColor"/> <feComposite in="shadowColor" in2="insetBlur" operator="in" result="inset"/></p><p><!-- 合并：外发光（上）→ 内阴影（中）→ 原图（下）--> <feMerge> <feMergeNode in="glow"/> <feMergeNode in="inset"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter>
注意：这里 <femergenode></femergenode> 的顺序决定了视觉层级——glow 最上，inset 居中半透，SourceGraphic 底层清晰可见。
立即学习“前端免费学习笔记（深入）”；
进阶技巧：复用结果与透明度控制
同一个滤镜结果可被多个 <femergenode></femergenode> 引用，适合做“双重曝光”或“蒙版叠加”。同时，可通过 <fecomponenttransfer></fecomponenttransfer> 或 flood-opacity 预先调节各层透明度，避免最终叠加过重。
- 用
result="layer1"显式命名中间结果，方便后续多次引用 - 对发光层加
<fecomponenttransfer></fecomponenttransfer>调整 alpha 通道，让光晕更自然 - 避免无意义的重复合并——只在需要分层控制时才拆解步骤
兼容性与调试建议
所有现代浏览器（Chrome、Firefox、Safari、Edge）均完整支持 <femerge></femerge>。调试时推荐：
- 逐个注释
<femergenode></femergenode>查看每层实际输出 - 用
<feimage></feimage>或临时<feflood></feflood>替换某层，验证合成顺序 - 在 DevTools 中检查 filter 元素是否正确挂载，确保
result名不冲突
不复杂但容易忽略：FeMerge 不是“混合模式”，它不做 color-burn 或 screen 运算；如需高级混合，得配合 <feblend></feblend> 或 Canvas 后处理。
