SVG圆形进度环本质是通过stroke-dasharray设圆周长、stroke-dashoffset控制偏移实现描边动画，而非rotate或CSS圆角；需精确匹配viewBox、r与周长，绑定CSS动画到stroke-dashoffset并处理JS动态更新时的动画续接问题。
SVG <circle> 的 stroke-dasharray 是关键
圆形进度环本质不是“画圆”，而是用 SVG 圆形的描边（stroke）做动画。核心在于把描边“断开”成可控制长度的一段，再用 stroke-dasharray 和 stroke-dashoffset 配合动画推动它显示。
常见错误是直接对 transform: rotate() 动画整个圆——这会导致文字或子元素跟着转，且无法精准对应百分比数值；还有人试图用 CSS 的 border-radius: 50% 做，但纯 CSS 实现不了可编程控制的弧长。
-
stroke-dasharray设为圆周长（如251.2），就相当于“整条线可用” -
stroke-dashoffset控制起点偏移：值越大，露出的线越短；从251.2到0就是 0% → 100% - 圆周长 =
2 * π * r，若r=40，则周长约251.2；必须和viewBox、r精确匹配，否则动画卡顿或错位
CSS 动画要绑定到 stroke-dashoffset，不是 stroke
很多人给 stroke 加 transition，结果颜色变了、粗细变了，但“长度没动”。真正驱动进度的是 stroke-dashoffset 的变化，它必须可动画、可插值。
注意：IE 不支持 stroke-dashoffset 的 CSS 动画（需 fallback 到 JS 或 SMIL），现代浏览器（Chrome/Firefox/Safari/Edge 79+）都 OK。
立即学习“前端免费学习笔记（深入）”；
- 用
@keyframes定义从251.2到0的偏移变化，而不是写死在 class 上 - 动画时长建议用
ease-out，避免机械感；线性（linear）反而显得生硬 - 如果进度值动态传入（比如 React 的
percent），得用内联 style 计算stroke-dashoffset：251.2 * (1 - percent / 100)
如何让进度环响应式且不模糊
SVG 在缩放时容易出现描边锯齿或虚化，尤其用 % 或 vw 设置宽高后。根本原因是 SVG 渲染依赖像素对齐和 viewBox 的坐标精度。
错误做法：给 <svg> 设 width: 100%; height: auto 却不设 viewBox；或用 transform: scale() 强行缩放整个 SVG。
- 必须设置
viewBox="0 0 100 100"（或固定比例），再用 CSS 控制容器尺寸 -
r值推荐用相对单位（如r="40"），配合viewBox实现等比缩放 - 加
shape-rendering="geometricPrecision"可缓解边缘模糊，但代价是轻微性能下降 - 避免在 SVG 内部用
px混搭%，统一用无单位数值（即 viewBox 坐标系）
JS 动态更新时别忘了重置动画状态
当进度值从 30% 突然跳到 80%，CSS 动画不会自动“续上”，而是从当前 stroke-dashoffset 值重新触发。用户会看到“倒退一下再冲上去”，体验断裂。
这不是 CSS 的 bug，而是动画机制决定的：transition 只在属性值变化时触发，不感知语义（比如“这是新进度”还是“只是微调”）。
- 每次更新前，先临时移除动画类（如
progress-ring--animate），offsetTop触发重排，再加回来 - 或者用
animation: none瞬间清空动画状态，再设回带动画的规则 - 更稳妥的做法：用
requestAnimationFrame+stroke-dashoffset逐帧插值，完全绕过 CSS 动画限制
最常被忽略的是 viewBox 和 r 的数值一致性——差 0.1 都可能导致动画终点停不准，看起来永远差一截。调试时直接在 DevTools 里改 stroke-dashoffset 的值，看是否能精确走到 0，比猜参数靠谱得多。
