stroke-dasharray不能直接用calc(23.14var(--r))，因它只接受无单位数值，而含单位的css变量参与calc会导致safari等浏览器失效；正确做法是js计算纯数字周长并注入变量，配合viewbox归一化和stroke-dashoffset动画实现可靠进度环。
stroke-dasharray 为什么不能直接写 calc(2 * 3.14 * var(--r))
因为 stroke-dasharray 只接受绝对长度值（如 282.74），不支持带单位的 CSS 变量参与 calc() 运算。即使你写了 --r: 45px，calc(2 * 3.14 * var(--r)) 在多数浏览器中会计算失败或被忽略——SVG 渲染引擎不解析含单位的变量参与数学运算。
常见错误现象：stroke-dasharray: calc(2 * 3.14 * var(--r)) 在 Chrome 看似有效，但在 Safari 16.6+ 或旧版 Firefox 中直接失效，进度环卡在 0% 或跳变。
- 正确做法是：JS 计算周长后，用
element.style.setProperty('--circum', circumference)注入纯数字（无单位）到 CSS 变量 - CSS 中写
stroke-dasharray: var(--circum) 0，确保第一个值是数值，第二个值是 0（空白段拉满） - 别用
%或rem给--r赋值；必须是纯数字，比如--r: 45，后续再靠viewBox缩放
viewBox 是自适应的真正开关，不是 width/height
很多人设了 width: 100%; height: auto 就以为“响应式”了，结果圆环在小屏上描边糊、动画卡顿、起点偏移。根本原因是没控制缩放基准——SVG 的缩放逻辑由 viewBox 决定，不是 CSS 尺寸。
错误写法：<svg width="100%" height="200px"><circle r="45"></circle></svg> → r="45" 固定像素，缩放时描边粗细失真，周长也不再匹配。
- 必须固定
viewBox="0 0 100 100"，让内部坐标系归一化 -
<circle cx="50" cy="50" r="45"></circle>中的45是相对于 viewBox 的比例值，缩放时自动适配 - 配合
transform: rotate(-90deg)固定起点在 12 点钟方向，且该 transform 必须写死在 SVG 元素上，不要放进动画里
progress 变量要定义为 0–1 范围，别用百分比字符串
想通过 --progress: 75% 控制进度？不行。calc(var(--circum) * (1 - var(--progress))) 会因单位混用直接报错或返回 0，导致 stroke-dashoffset 永远为 0，环一上来就满。
正确做法是把进度值标准化为小数：0 表示 0%，1 表示 100%。这样所有 calc 运算才可靠。
- JS 更新进度时写
el.style.setProperty('--progress', 0.68)，而不是'68%' - CSS 中用
stroke-dashoffset: calc(var(--circum) * (1 - var(--progress))) - 务必加
transition: stroke-dashoffset 0.4s ease，否则变量变了但动画不动 - 如果需要显示数字文本（如 “68%”），另用 JS 同步更新
textContent，别试图用 CSS counter 或 attr() 混合
为什么只动画 stroke-dashoffset，不碰 transform
同时动画 transform: rotate() 和 stroke-dashoffset 看似灵活，实则在 Safari 和部分 Android WebView 中极易掉帧甚至卡死。SVG 属性动画的硬件加速路径不稳定，尤其当 rotate 值随进度实时变化时。
真实项目中观察到：动画开始 2 秒内掉帧率超 40%，用户滑动页面时进度环明显滞后。
- 解决方案：起点旋转提前固化——
<circle transform="rotate(-90 50 50)"></circle>，不再参与动画 - 只驱动
stroke-dashoffset，它天然支持 GPU 加速，且兼容性好 - 若需“顺时针从 12 点开始”以外的起始方向（比如逆时针、从 6 点开始），改用
path+getTotalLength()更稳妥，circle的旋转语义太弱
关键点藏在细节里：viewBox 定义缩放，JS 提供纯净数值，CSS 只做线性插值——三者缺一不可。一旦把周长或进度值塞进带单位的变量，或者指望 CSS 自己算 π，整个链路就断在 Safari 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
