clip-path 中直接使用 CSS 变量（如 polygon(var(--x))）会静默失效，因 polygon/path 参数需解析时确定，不支持运行时变量；唯一可靠方案是 SVG 引用配合 transform 或 path() 内 calc() 限定使用。
直接在 clip-path: polygon() 或 clip-path: path() 里写 var(--x) 会静默失效——浏览器不报错，但整条声明标为 “invalid”，裁剪完全不生效。这不是语法写错了，是 CSS 解析机制决定的：polygon 和 path 的参数在样式解析阶段就被固化，不支持运行时变量插值。
为什么 clip-path: polygon(var(--a) var(--b)) 总是无效
常见错误现象：DevTools 显示该属性灰掉、标红或写 “invalid”，元素毫无裁剪效果。即使你确认变量已定义、单位正确、逗号空格无误，也依然失败。
-
polygon()、circle()、path()等函数的整个参数字符串必须在 CSS 解析时就能确定，无法等待变量计算 -
calc(var(--x))在polygon()内部也无效（仅path()中calc()的内部表达式可含变量） - 写错单位（如
100px混进百分比路径）、顶点顺序反向、或父容器缺失overflow: hidden，都会加剧“看似写了却没效果”的错觉
真正能响应 CSS 变量的三种实操路径
核心思路：把变量作用域下沉到浏览器能动态计算的位置，而不是卡在 CSS 函数参数层。
- 用
clip-path: url(#myClip)引用内联 SVG，在<clipPath>内通过transform绑定变量，例如：<polygon points="0,0 100,0 100,100 0,100" transform="translate(var(--tx), var(--ty)) scale(var(--s))"/>，再配合transform-box: fill-box和transform-origin: center - 在
clip-path: path()字符串中，只允许calc()内部使用变量，如：clip-path: path("M0,0 L100,0 L100,calc(100vh - var(--gap)) L0,calc(100vh - var(--gap)) Z")；注意 Safari 不支持path()，Firefox 完全不支持（加-webkit-前缀也无效） - 用
attr(points)+ 自定义属性绑定 SVG 的points，但仅 Chromium 117+ 实验性支持，需手动开启chrome://flags/#enable-experimental-web-platform-features，生产环境不推荐
path() 中用 calc() 的严格限制
这是最轻量的方案，但边界非常清晰：变量只能出现在 calc() 括号内，且不能拼接字符串。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：
clip-path: path("M0,0 L100,0 L100,calc(100vh - var(--gap)) Z") - ❌ 静默失效：
clip-path: path("M0,0 L" var(--x) ",0 Z")（字符串拼接不被解析） - ❌ Safari 全面拒绝：
path()在 Safari 中始终不生效，无论是否含calc() - ⚠️ Firefox 完全忽略：
path()即使加前缀也不渲染，必须降级为 SVG 引用 fallback
SVG 引用方案的关键细节
这是目前唯一跨浏览器、可变量驱动、且支持贝塞尔曲线的稳定方案。
-
<svg>必须在 HTML 中内联（不能外链），且<clipPath>要设id，CSS 才能通过url(#id)正确引用 - 给
<clipPath>设置transform-box: fill-box（否则transform默认按 viewBox 原点算，不是元素 content box） - 若用
scale()控制缩放，务必同步调整transform-origin，否则会偏移 - 路径坐标建议统一用无单位数值（如
0,0），靠viewBox和容器尺寸比例自动适配，避免硬编码像素导致响应式断裂
最容易被忽略的点：你以为变量生效了，其实只是 fallback 到了默认矩形裁剪；真正的动态裁剪必须把计算逻辑交给 SVG 的 transform 或 path 的 calc() 内部——而这两者都有明确的浏览器支持断层，Safari 和 Firefox 的缺口至今未补全。
