使用 SVG 滤镜实现高斯模糊与阴影效果，核心在于先通过将一组滤镜原语按顺序组织成效果链，再使用filter="url(#id)"把滤镜应用到目标元素上。高斯模糊通常由feGaussianBlur完成，输入一般为in="SourceGraphic"或SourceAlpha，而模糊程度则通过stdDeviation控制；阴影效果往往不是依靠单一原语完成，而是需要结合feOffset、feGaussianBlur与feMerge共同实现。至于内阴影，处理会更精细，通常先借助feComponentTransfer对 Alpha 通道进行反相，再通过feComposite operator="in"将效果限制在指定区域内。

SVG 滤镜制作高斯模糊和阴影的关键，就是用 定义完整的滤镜效果链，再通过 filter="url(#id)" 精确应用到指定图形元素上。它并不是简单地“一键添加滤镜”，而是需要按照顺序组合多个原语（primitives），并明确每一步的输入、输出以及作用范围，这样才能稳定实现理想的 SVG 模糊与阴影效果。

高斯模糊：用 feGaussianBlur 精准控制模糊强度

在 SVG 中实现高斯模糊，必须先从 内定义的 开始，不能直接写在 body 或 svg 根节点下，否则滤镜不会生效：

• in 属性必须明确指定——in="SourceGraphic" 表示模糊整个图形及其颜色，in="SourceAlpha" 则只模糊轮廓区域，更适合制作阴影效果
• stdDeviation 用来控制高斯模糊强弱：数值在 2–4 时适合图标柔边，8–12 更适合背景虚化；如果写成双参数，如 stdDeviation="3 8"，还能模拟类似运动模糊的视觉效果
• 如果需要串联多次模糊处理，例如先轻度模糊再重度模糊，可通过 result 命名中间结果，再让下一个 feGaussianBlur 使用 in 引用该结果
• 当模糊值较大，例如 stdDeviation="20"，需要主动扩大滤镜区域：x="-20%" y="-20%" width="140%" height="140%"，否则模糊边缘很容易被裁切掉

真实阴影：组合 feGaussianBlur + feOffset + feMerge

相比之下，CSS 的 drop-shadow() 在 SVG 场景中的兼容性与可控性都相对有限，因此使用原生 SVG 滤镜链来实现阴影，通常会更加稳定、灵活且专业：

• 第一步先通过 in="SourceAlpha" 提取图形轮廓，避免直接模糊整块颜色，从而让阴影边缘更自然
• 第二步使用 将模糊后的轮廓进行位移，形成典型的投影偏移效果
• 第三步借助 合并图层： 表示原始图形位于上层， 表示阴影层位于下方
• 要特别注意 的先后顺序，因为它会直接决定图层上下关系；顺序错误时，阴影可能会盖住原图，影响显示效果

内阴影：反相 Alpha + 合成限制作用区域

SVG 本身并不支持 box-shadow: inset，但可以通过组合滤镜原语来模拟“向内投射”的内阴影效果，从而增强图形层次感与立体感：

• 首先使用 对 SourceAlpha 做反相处理（例如 type="table" 配合 tableValues="1 0"），让图形内部变透明、外部变为不透明区域
• 接着对这个反相后的蒙版执行 feGaussianBlur 与 feOffset，生成一种“由外向内渗透”的阴影基础形态
• 再通过 把阴影效果限制在原始图形的可见区域内，确保阴影只出现在内部，而不会溢出边界
• 最后利用 feMerge 将内阴影与原图叠加，即可完成更加自然的 SVG 内阴影表现

常见失效原因与实用避坑要点

大多数“SVG 滤镜写了却没有效果”的问题，通常都集中在以下几个基础但关键的前提条件上：

• 目标元素必须具备明确尺寸：例如 默认是 inline 元素，如果没有设置 width/height，或者没有改成 display: block，就可能出现静默失效
• 必须放在 结构内部，若单独写在 HTML body 中，浏览器通常不会识别为有效 SVG 滤镜定义
• url(#blur) 中的 blur 必须与 完全一致，包括大小写、空格和引号细节，任何不一致都可能导致引用失败
• 如果漏写 in 属性，例如只写 ，常见结果就是出现黑块、显示异常或根本没有模糊效果