SVG滤镜必须用<filter>定义于<defs>中并设唯一id，通过filter: url(#id)应用；失效主因是元素无尺寸、滤镜引用错误或输入源缺失。
filter: url(#id) 是唯一可靠、跨浏览器兼容的 SVG 滤镜应用方式。其他写法如 filter: blur(5px) 或 filter: emboss() 都不是标准 SVG 滤镜，前者是 CSS 原生滤镜（功能有限），后者根本不存在。
怎么定义一个可用的 SVG 滤镜
滤镜必须包裹在 <svg> 的 <defs> 内，且需带 id；<svg> 可以是内联的、隐藏的（width="0" height="0"），但不能缺失。
- 必须用
<filter>标签包裹所有滤镜原语（如<feGaussianBlur>、<feColorMatrix>） -
id值要唯一，且大小写敏感——CSS 中url(#Blur)和url(#blur)是两个不同滤镜 - 建议显式设置
x、y、width、height（如x="-10%" y="-10%" width="120%" height="120%"），否则默认裁剪区域可能切掉模糊/阴影边缘 - 滤镜定义可放在任意位置：HTML 顶部、底部、甚至外部 SVG 文件（但需同源）
为什么 filter: url(#xxx) 不生效
90% 的失效源于三类硬性限制，和浏览器无关：
- 目标元素未处于“绘画上下文”中：
<img>、<div>、<p>都支持，但<span>默认 inline，无尺寸，滤镜不触发（加display: block或inline-block即可） - SVG 滤镜定义不在当前文档或跨域：外部 SVG 引入时，
url(https://cdn.com/filters.svg#blur)在多数浏览器被阻止（CORS + filter 安全策略） - 滤镜内部引用了不存在的输入源：比如
<feGaussianBlur in="SourceGraphic">是安全的，但若写成in="myInput"而没提前用<feImage>或<feOffset>定义myInput，整个滤镜静默失败
feColorMatrix 的 type 参数别乱设
type 不是可选修饰，它直接决定 values 的格式和维度，填错就完全无效：
-
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–1+），values="0.3"表示降饱和，values="2"表示增强 -
type="hueRotate"：单位是度（非弧度），values="90"合法，values="1.57"会被忽略 - 漏写
type属性时，浏览器按matrix解析，但只读前 20 个值——若你本意是sepia却没写type，values="1"就会当成 matrix 的第一行，结果不可控
组合多个滤镜时顺序很关键
SVG 滤镜是线性流水线，上一个原语的 result 是下一个的 in，顺序反了效果全错：
立即学习“前端免费学习笔记（深入）”；
- 想“先模糊再提亮”，必须写：
<feGaussianBlur stdDeviation="3" result="blurred"/>→<feComponentTransfer in="blurred"> - 若写成
<feComponentTransfer>在前，它默认作用于SourceGraphic（原始图），模糊就白做了 - 用
result命名中间结果时，避免用blur、alpha这类通用名——容易和内置关键字冲突，推荐用step1、postBlur等明确标识 - 调试时可在 DevTools 中右键 SVG 元素 → “Edit as HTML”，实时修改
stdDeviation或slope值，观察响应
result 和 in 连对了线。 
