直接用stroke-dashoffset变量动画会卡顿或跳变，因未匹配stroke-dasharray导致起点错位，且未声明@property类型或transition作用于元素本身，calc()计算失效或主线程重绘引发掉帧。
为什么直接用 stroke-dashoffset 变量做动画会卡顿或跳变
因为 SVG 的 stroke-dashoffset 是数值型 CSS 属性，但浏览器对它的动画支持依赖于是否被识别为“可插值属性”——而原生 SVG 元素上的该属性，在未显式声明 transform 或 opacity 等触发合成层的条件下，动画会走主线程重排重绘，尤其在低性能设备上明显掉帧。更关键的是：stroke-dashoffset 的起始值必须和 stroke-dasharray 匹配，否则动画起点错位，看起来像“倒着跑”或“闪一下再动”。
-
stroke-dasharray必须先算出圆环周长（2 * π * r），设为固定值（比如100），才能让stroke-dashoffset从100动到0表示 0%→100% - CSS 变量不能直接用于 SVG 元素的内联
style中动态更新stroke-dashoffset，必须靠 JS 注入或 CSS 自定义属性继承 +attr()（但attr()不支持数值计算） - 真正可行的路径是：用 CSS 变量控制一个伪类或父容器的
--pct，再通过calc()在 SVGstyle中绑定，或更稳妥地——用 JS 同步更新style.strokeDashoffset
如何用 CSS 变量驱动 stroke-dashoffset 实现平滑百分比动画
核心思路是把变量作为“输入”，用 calc() 把它映射成偏移量，再配合 transition 触发硬件加速。前提是 SVG 圆环已预设好 stroke-dasharray 和初始 stroke-dashoffset。
- 假设圆环
r=45，则周长 ≈282.74，取整为283；设置stroke-dasharray: 283，这样满环就是 100% 对应stroke-dashoffset: 0，0% 对应stroke-dashoffset: 283 - 定义 CSS 变量：
:root { --pct: 0; }，然后在 SVG<circle></circle>上写：style="stroke-dashoffset: calc(283 - (283 * var(--pct) / 100)); transition: stroke-dashoffset 0.4s ease" - JS 更新只需：
document.documentElement.style.setProperty('--pct', 75)，浏览器会自动重算calc()并触发动画 - 注意：IE 不支持
calc()里嵌套var()，如需兼容，改用 JS 直接设el.style.strokeDashoffset = offsetValue
stroke-dashoffset 动画卡在 0% 或 100% 不动的常见原因
不是代码写错了，而是 SVG 渲染逻辑和 CSS 变量更新时机不一致导致的“视觉冻结”。最常发生在 React/Vue 组件首次挂载、或变量初始值没设对时。
- 初始
--pct值为空或非数字（如''、undefined），calc()计算结果为NaN，浏览器静默忽略该样式，stroke-dashoffset保持默认（通常是0），看起来就是“卡在 100%” - SVG 元素未设置
stroke、stroke-width或fill: none，导致圆环不可见，误以为动画没生效 - CSS
transition写在了父容器而非<circle></circle>本身，属性变更不会被监听 - 使用了
will-change: stroke-dashoffset却没加transform: translateZ(0)等触发层合成，反而加重主线程负担
要不要用 @property 显式注册 CSS 变量类型
要，但仅限现代浏览器（Chrome 110+、Safari 16.4+）。不注册的话，calc(283 - (283 * var(--pct) / 100)) 中的 --pct 被当作文本处理，动画无法插值——也就是说，即使你用 transition，浏览器也只在关键帧跳变，没有中间帧。
- 注册方式：
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }</number> - 注册后，
transition: stroke-dashoffset 0.4s ease才能真正按数值线性插值，动画丝滑 - 不支持
@property的环境（如旧版 Edge、Firefox），必须降级为 JS 控制requestAnimationFrame+ 手动更新strokeDashoffset - 别漏掉
syntax: '<number>'</number>——写成'<integer>'</integer>或漏引号都会失效
CSS 变量驱动进度圆环的关键不在“能不能动”，而在“动得准不准、顺不顺”。最容易被忽略的是周长计算精度、@property 类型声明、以及初始值校验——这三个点任一出错，动画就变成“手动开关灯”，而不是呼吸式渐变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
