css变量不能直接用于filter属性的滤镜id引用，因为var()展开后仅为字符串而非可解析的url()函数；正确做法是用变量控制开关或参数，通过类名、data属性切换预定义滤镜，或用js动态更新svg滤镜节点属性。
不能直接把 SVG 滤镜 ID 存进 CSS 变量后用 filter: var(--filter-id) 生效 —— 浏览器不解析变量值为滤镜引用，只会当作文本字符串丢弃。
为什么 filter: var(--my-filter) 总是失效
CSS 的 filter 属性只接受函数式语法（如 url(#id)、blur(2px)），而 var() 插入的是纯字符串。即使你写成 --my-filter: url(#glow);，变量展开后浏览器仍视其为未解析的字面量，不会触发滤镜查找。
- 实际行为：
filter: var(--my-filter)→ 解析为filter: "url(#glow)"（带引号的字符串），等价于无效值 - 验证方式：打开 DevTools → Elements 面板 → 查看 computed filter 值，若显示
none或空，说明变量未生效 - 例外情况：仅当变量值被用在
@supports或媒体查询中作条件判断时，字符串内容才被读取，但不参与渲染
真正可行的动态滤镜方案：CSS 变量 + 属性切换
核心思路是：用 CSS 变量控制「开关」或「参数」，而非滤镜 ID 本身；滤镜定义保留在 <svg></svg> 中，通过类名或属性选择器切换应用。
- 把不同滤镜预定义在多个
<filter></filter>元素里，ID 分别为blur-2、blur-5、glow等 - 用 CSS 变量控制元素是否启用某类效果，例如：
--has-glow: 1，再配合属性选择器[data-glow] - 或用
class+:is()组合：.card:is([data-blur="high"]) { filter: url(#blur-5); } - JS 动态操作时，改的是
element.dataset.blur = "high"或element.classList.toggle("glow-active")，不是改 CSS 变量
用 CSS 变量驱动 SVG 滤镜内部参数（推荐）
这才是变量真正起作用的地方：把 stdDeviation、dx、flood-opacity 这些可动画/可响应的数值抽成变量，在 SVG 滤镜中用 attr() 或 JS 注入（注意：SVG 内部不支持 var()，需间接实现）。
- 方法一（静态注入）：服务端或构建时将变量值写死进 SVG 字符串，例如生成
<fegaussianblur stddeviation="<%= blurValue %>"></fegaussianblur> - 方法二（运行时 JS 注入）：用 JS 读取
getComputedStyle(el).getPropertyValue("--blur")，再更新<fegaussianblur></fegaussianblur>的stdDeviation属性 - 方法三（CSS 自定义属性 +
attr()不适用）：SVG 滤镜原语不支持attr(--blur)，该语法仅限于某些 presentation 属性（如fill），stdDeviation是 XML 属性，必须用 JS 或预处理
容易忽略的关键点
很多人卡在“以为变量能穿透到 SVG 内部”，其实整个链路是断裂的：CSS 变量 → HTML/CSS 层 → 无法直达 SVG DOM 属性。真正可控的只有两段：HTML 元素上的 filter 值（靠 class/data 切换），以及 SVG 滤镜节点的属性（靠 JS 更新）。中间没有自动绑定机制。
如果你需要频繁切换十几种滤镜组合，建议封装一个轻量 JS 工具函数，接收目标元素和配置对象（如 { blur: 3, glow: true, shadowX: 2 }），自动匹配并应用对应滤镜或实时修改 SVG 节点 —— 这比硬啃变量穿透更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
