FeMerge 是 SVG 滤镜中用于按序叠加多个滤镜结果的合成元素，必须嵌套于内且仅含子元素，顺序决定图层上下关系，支持外发光、内阴影与原图分层合成。

FeMerge 是 SVG 滤镜中专门用于“合并多个滤镜效果”的关键元素，它本身不生成图像，而是按顺序把前面定义的 所引用的滤镜结果逐层叠加（类似图层合成），从而实现阴影+模糊+发光+色彩调整等多重效果的一体化呈现。

FeMerge 的基本结构和工作逻辑

它必须嵌套在 内部，且只能包含 子元素。每个 通过 in 属性指定要合并的输入源（如 "SourceGraphic"、"blur"、"shadow" 等），顺序决定图层上下关系：排在前面的 在下方，后面的在上方。

• in="SourceGraphic" 表示原始图形（最底层）
• in="blur" 或自定义结果名需先由 等滤镜用 result 属性声明
• 合并时默认使用“over”合成模式（上层覆盖下层，支持透明度）

典型组合：内阴影 + 外发光 + 原图

以下是一个常见实用案例：给文字或图标添加柔和内凹感（内阴影）和柔和外光晕（外发光），再叠回原图：

<filter id="glowAndInset"><!-- 外发光：模糊白色填充 --><feflood flood-color="#fff" result="white"></feflood><fecomposite in="white" in2="SourceAlpha" operator="in" result="flooded"></fecomposite><fegaussianblur in="flooded" stddeviation="3" result="glow"></fegaussianblur><p><!-- 内阴影：反向模糊+位移+颜色 -->
<feoffset dx="0" dy="1" result="offset"></feoffset><fegaussianblur in="offset" stddeviation="1" result="insetBlur"></fegaussianblur><feflood flood-color="#000" flood-opacity="0.3" result="shadowColor"></feflood><fecomposite in="shadowColor" in2="insetBlur" operator="in" result="inset"></fecomposite></p>
<p><!-- 合并：外发光（上）→ 内阴影（中）→ 原图（下）-->
<femerge><femergenode in="glow"></femergenode><femergenode in="inset"></femergenode><femergenode in="SourceGraphic"></femergenode></femerge></p></filter>

注意：这里 的顺序决定了视觉层级——glow 最上，inset 居中半透，SourceGraphic 底层清晰可见。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

进阶技巧：复用结果与透明度控制

同一个滤镜结果可被多个 引用，适合做“双重曝光”或“蒙版叠加”。同时，可通过 或 flood-opacity 预先调节各层透明度，避免最终叠加过重。

• 用 result="layer1" 显式命名中间结果，方便后续多次引用
• 对发光层加 调整 alpha 通道，让光晕更自然
• 避免无意义的重复合并——只在需要分层控制时才拆解步骤

兼容性与调试建议

所有现代浏览器（Chrome、Firefox、Safari、Edge）均完整支持 。调试时推荐：

• 逐个注释 查看每层实际输出
• 用 或临时 替换某层，验证合成顺序
• 在 DevTools 中检查 filter 元素是否正确挂载，确保 result 名不冲突

不复杂但容易忽略：FeMerge 不是“混合模式”，它不做 color-burn 或 screen 运算；如需高级混合，得配合 或 Canvas 后处理。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！