SVG滤镜实现高斯模糊和阴影的核心是通过<filter>定义原语链并用filter="url(#id)"应用；高斯模糊用feGaussianBlur（in="SourceGraphic"或SourceAlpha，stdDeviation控强度），阴影需feOffset+feGaussianBlur+feMerge组合，内阴影则依赖feComponentTransfer反相Alpha后feComposite operator="in"限定区域。
SVG 滤镜实现高斯模糊和阴影，核心是用 <filter> 定义效果链，再通过 filter="url(#id)" 应用到目标元素上。它不是“一键加滤镜”，而是按顺序组装多个原语（primitives），每一步都需明确输入、输出和作用范围。
高斯模糊：用 feGaussianBlur 控制柔化程度
模糊必须从 <defs> 里定义的 <filter> 开始，不能直接写在 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 中兼容差、控制弱，原生滤镜链才是可靠方案：
- 第一步用
in="SourceAlpha"提取图形轮廓，避免模糊整块颜色 - 第二步
<feOffset dx="2" dy="2">把模糊后的轮廓平移，形成阴影偏移 - 第三步
<feMerge>合并两层：<feMergeNode in="SourceGraphic"/>（原图）在上，<feMergeNode in="offsetBlur"/>（阴影）在下 - 注意
<feMergeNode>的顺序决定图层上下关系，错位会导致阴影盖住图形
内阴影：反相 Alpha + 合成限定区域
SVG 不支持 box-shadow: inset，但可用滤镜模拟“向内投射”的视觉效果：
立即学习“前端免费学习笔记（深入）”；
- 先用
<feComponentTransfer>对SourceAlpha反相（type="table"配tableValues="1 0"），让图形内部变透明、外部变不透明 - 对这个反相蒙版做
feGaussianBlur和feOffset，生成“从外往里渗”的阴影雏形 - 用
<feComposite operator="in">把阴影限制在原始图形区域内，确保只出现在内部 - 最后用
feMerge将内阴影与原图叠加，完成立体感增强
常见失效原因和避坑要点
90% 的“写了没反应”问题，卡在三个硬性前提上：
- 目标元素必须有明确尺寸：
<img>默认 inline，没设width/height或display: block就静默失败 -
<filter>必须嵌套在<svg><defs>内，单独放在 HTML body 里无效 -
url(#blur)中的blur必须和<filter id="blur">完全一致——大小写、空格、引号一个都不能差 - 漏写
in属性（如只写<feGaussianBlur stdDeviation="5"/>）会导致黑块或无效果
