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