filter: url(#id)是唯一可靠、跨浏览器兼容的SVG滤镜引用方式；SVG滤镜必须定义在<svg>的<defs>内并设唯一id，且大小写敏感，目标元素需有尺寸、处于绘画上下文，否则静默失效。
filter: url(#id) 是唯一可靠写法
别试 filter: blur(2px) 或 filter: drop-shadow()——那些是 CSS 原生滤镜，和 SVG 滤镜无关。SVG 滤镜必须用 url(#id) 引用，且 id 必须严格匹配 <filter> 的 id 属性值（大小写敏感、不能多空格）。浏览器不会报错，但写错就完全不生效。
常见失效场景：
-
<img src="a.jpg" filter="url(#blur)">：HTML 元素不支持filter属性（只有 SVG 元素支持），必须用 CSS 方式 -
filter: url(#Blur);但定义的是<filter id="blur">：大小写不一致 → 静默失败 -
filter: url(#blur)没加引号或括号：必须是filter: url("#blur")，漏引号在部分浏览器中会忽略
滤镜必须放在 <defs> 里，且 <svg> 不能省
<filter> 不是独立标签，它必须嵌套在 <svg> 的 <defs> 内。哪怕你只用它给普通 <div> 加效果，这个 <svg> 也得存在——可以隐藏：<svg width="0" height="0" style="position: absolute; left: -9999px;"><defs>...</defs></svg>。
不能这样写：<filter id="blur"><feGaussianBlur stdDeviation="2"/></filter>（没包在 <svg><defs> 里 → 失效）
立即学习“前端免费学习笔记（深入）”；
也不能外链 SVG 文件后直接 url(https://cdn.com/filters.svg#blur)：跨域 + 安全策略双重拦截，现代浏览器基本都拒绝。
feColorMatrix 的 type 参数不是可选的
<feColorMatrix> 的 type 决定 values 解析方式，填错就等于没写。漏掉 type 时浏览器默认按 matrix 解析，但只读前 20 个数字，后面全丢弃。
-
type="matrix"：必须提供 20 个数字（5×4 行优先），如values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" -
type="saturate"：只接受一个 0–∞ 的数值，values="0.7"表示降饱和，values="2"表示增强 -
type="hueRotate"：单位是度（values="90"合法，values="1.57"被忽略） -
type="sepia"或type="grayscale"：不接受values，写了也无效
组合多个滤镜时顺序就是执行顺序
SVG 滤镜是线性流水线：in 指向上一步的输出，result 是这一步的命名出口。顺序反了，效果就错位。
例如想“先模糊再提亮”，必须：
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blurred"/> <feComponentTransfer in="blurred"> <feFuncR type="linear" slope="1.2"/> </feComponentTransfer>
如果把 <feComponentTransfer> 放前面，它作用对象默认是 SourceGraphic（原始图），模糊就白做了。
容易被忽略的一点：<feMerge> 里的 <feMergeNode> 顺序决定图层叠放——后写的在上层。做阴影时，<feMergeNode in="blur"/> 要写在 <feMergeNode in="SourceGraphic"/> 前面，否则阴影盖不住原图。
