stroke-dasharray 不支持 calc()，必须用 JS 计算周长后通过 setAttribute 或内联 style 注入；--progress 驱动动画需满足初始/结束值、transition、0–1 小数范围及正确 JS 更新方式。
stroke-dasharray 为什么不能直接用 CSS 变量算周长
因为 calc() 在 stroke-dasharray 中不生效——这个属性只接受数值或 none，不支持表达式。你写 stroke-dasharray: calc(2 * 3.1416 * var(--r))，浏览器会直接忽略整条声明，退回到默认描边（通常是实线满圈）。
真实周长必须由 JS 算出后，用 setAttribute('stroke-dasharray', val) 注入，或提前存为内联 style：style="stroke-dasharray: 314.16"。
常见错误是把 --r: 50px 这种带单位的值传进 calc，CSS 不允许单位混入计算，结果直接失效。
如何让 --progress 变量真正驱动 stroke-dashoffset 动画
关键不是“设变量”，而是让变量变化能触发重绘+插值动画。
必须同时满足三个条件：
• stroke-dashoffset 初始值设为 var(--circum)（即周长），结束值设为 calc(var(--circum) * (1 - var(--progress)))
• 给 <circle> 加上 transition: stroke-dashoffset 0.35s ease-out（不能只写在 class 里，得确保元素上存在）
• --progress 必须是 0–1 范围的小数（如 --progress: 0.72），别用百分比（--progress: 72% 会导致 calc 解析失败）
• 若用 JS 更新，要走 element.style.setProperty('--progress', 0.72)，而不是改 innerHTML 或 dataset
为什么 rotate(-90deg) 必须和 stroke-dashoffset 一起 transition
否则动画不同步：旋转立刻完成，而描边偏移还在慢慢动，视觉上就是“进度条从右边突然跳到顶部，再开始画”。
正确写法是：
• 把 transform: rotate(-90deg) 写进同一个 transition：transition: stroke-dashoffset 0.35s ease-out, transform 0.35s ease-out
• 或者更稳妥：把 rotate(-90deg) 提前写死在 SVG 元素上，只对 stroke-dashoffset 做过渡（避免 transform 触发重排）
• 注意：如果父容器用了 preserveAspectRatio="xMidYMid meet"，又没配好 viewBox，rotate 可能被缩放干扰，导致起始点偏移
移动端 Safari 和 Android WebView 的兼容雷区
这些环境对 SVG 动画更敏感，几个硬性要求：
• <svg> 必须有明确 viewBox（如 viewBox="0 0 100 100"），不能只靠 width/height 缩放
• stroke-dasharray 必须显式写两个值，比如 283, 0；只写 283 会被 Safari 补全成 283, 283，出现虚线环闪动
• iOS 15+ 以下版本不支持 CSS 变量注入 SVG 属性，JS 必须用 setAttribute('stroke-dashoffset', offset) 替代 style.setProperty
• 如果动画卡顿，加 style="will-change: stroke-dashoffset" 强制 GPU 加速（但别滥用，只在动画中临时加）
立即学习“前端免费学习笔记（深入）”；
复杂点在于：周长不是静态值，它随缩放、DPR、viewBox 解析方式实时变化；而 stroke-dashoffset 的像素精度在高 DPR 屏上稍有偏差，就会导致最后一帧“差一像素”没闭合。最稳的做法，永远优先用 circle.getTotalLength()，哪怕多一次 DOM 查询。
