SVG阴影和模糊必须用原生实现：外阴影用feOffset+feGaussianBlur+feMerge三步组合；内阴影需通过SourceAlpha蒙版反转后合成；纯模糊直接用feGaussianBlur。

SVG 图形不能直接用 CSS 的 box-shadow 或 filter: blur() 实现阴影和模糊，必须通过 SVG 原生的 元素定义滤镜，再用 filter 属性引用。核心是组合 、、 等滤镜原语，且需注意坐标范围设置，否则效果会被裁剪。

添加投影阴影（外阴影）

最常用、兼容性最好的写法是三步组合：偏移 → 模糊 → 合并。适用于所有现代浏览器（包括 Firefox 和旧版 Safari）：

• 在 中定义 ，设好 x、y、width、height（建议至少 "-50%" 到 "200%"，防止阴影被截断）
• 用 移动图形副本生成阴影位置，dx/dy 控制方向和距离
• 用 对偏移层模糊，stdDeviation 越大越柔和
• 用 把模糊阴影和原始图形叠在一起；其中 放前面， 放后面

示例代码：

  
    
      
      
      
        
        
      
    
  

然后给目标图形加上：filter="url(#drop-shadow)"

添加内阴影（inset shadow）

内阴影不是简单反向偏移，而是利用图形 Alpha 通道做蒙版，再模糊后“扣”进内部。关键步骤是反转透明度 + 合成限制：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 以 in="SourceAlpha" 起始，得到图形轮廓的黑白蒙版（黑=透明，白=不透明）
• 用 的 operator="arithmetic" 或 "in" 反转蒙版（让内部变可操作区域）
• 对反转后的蒙版做 和 （可选），生成阴影形状
• 用 将阴影限制在原始图形范围内
• 最后用 把处理后的阴影与 SourceGraphic 叠加

简明写法（省略部分 result 命名，适合快速实现）：

  
  
  
  
  
    
    
  

单独添加高斯模糊

如果只要模糊，不用阴影，最简方式是直接使用 ：

• 把 in 设为 "SourceGraphic"，表示对整个图形模糊
• stdDeviation 控制强度；支持两个值如 "2 5" 实现横向/纵向不同模糊度
• 注意仍要扩大 的 width/height，否则边缘会硬切

例如：，搭配 filter="url(#blur)" 即可生效。

兼容性与避坑提醒

虽简洁，但 Firefox 完全不支持，Safari 需 v16.4+ 且开启实验功能，生产环境慎用。务必坚持三步组合写法。

• 滤镜区域必须足够大：默认 width="100%" height="100%" 会裁掉模糊扩散部分，推荐统一设为 width="200%" height="200%" 并配 x="-50%" y="-50%"
• 不要漏掉 容器：所有 必须放在 内的 中才可复用
• 避免在 HTML 外联 SVG 中重复定义：多个 SVG 共用同一滤镜时，可将 提到页面顶部的隐藏 SVG 中（position: absolute; width: 0; height: 0）