环形进度用实现的核心是stroke-dasharray与stroke-dashoffset配合：设周长circumference，dasharray="circumference,circumference"，再将dashoffset从circumference减至0，配合rotate(-90)使起点在顶部。
如何用<circle></circle>画出环形进度的底层结构
环形进度的本质是 SVG 中一个圆弧从 0° 开始逐步“画满”一圈，但 SVG 没有原生圆弧进度元素，得靠 <circle></circle> 的 stroke-dasharray 和 stroke-dashoffset 配合实现。关键不是画弧，而是“截取并移动一段虚线”。
核心思路：<circle></circle> 本身是闭合路径，周长固定（2 * Math.PI * r），把它当成一条首尾相接的线；设周长为 circumference，那么 stroke-dasharray="circumference, circumference" 表示“画一段长为 circumference 的实线，再空一段等长间隙”，此时只显示整圈；把 stroke-dashoffset 从 circumference 逐渐减到 0，就相当于让实线段从“完全隐藏”滑动到“完全显示”。
常见错误：r 值写错导致坐标偏移、cx/cy 没对齐容器中心、没设置 transform="rotate(-90)" 导致进度从 3 点钟方向开始（默认起点在 3 点钟，而人眼习惯 12 点钟为起点）。
实操建议：
- 固定
r="50"，则circumference = 314.16（可直接写314或用 JS 计算后注入） - 务必加
transform="rotate(-90)"，让 0% 起点落在顶部 -
stroke-linecap="round"让两端更圆润，避免尖角 - 背景圆（track）和前景圆（progress）需用两个独立
<circle></circle>，前景圆设stroke-dasharray，背景圆不设
用 CSS @keyframes 控制环形动画的起止逻辑
CSS 动画适合做固定时长、无需交互反馈的加载指示器，比如页面初始化时的 3 秒旋转。但它无法动态响应数据变化（如从 30% 到 75%），那种场景必须用 JS 更新内联样式。
关键点在于：动画本质是改变 stroke-dashoffset，从最大值（隐藏）过渡到 0（显示全）。若要支持任意百分比，不能只依赖 @keyframes，而应把动画逻辑交给 JS，CSS 只负责过渡效果声明。
实操建议：
- 给进度圆添加
style="transition: stroke-dashoffset 0.3s ease"，而非写在 CSS 类里（避免被覆盖） - 动画起点值必须是
circumference，终点是circumference * (1 - progress)（例如 60% 进度对应 offset =314 * 0.4 = 125.6） - 不要用
animation-fill-mode: forwards配合 keyframes 做动态进度——它无法响应 runtime 修改 - 若坚持纯 CSS，只能预设几档（如
.pct-0,.pct-50），靠 class 切换，灵活性极低
用 JavaScript 动态更新 stroke-dashoffset 的安全写法
JS 是控制实时进度的唯一可靠方式，但直接操作 setAttribute 容易忽略单位、精度、DOM 同步等问题。最稳妥的是通过 style 属性写内联样式，并确保数值为数字类型（非字符串）。
常见错误现象：offset 不变、动画卡住、首次渲染错位、多实例互相干扰。
实操建议：
- 用
getTotalLength()获取真实周长，别硬编码（尤其当r来自 CSS 或响应式计算时） - 更新前先清除旧 transition：临时设
el.style.transition = 'none'，再设新 offset，再恢复 transition，避免跳变 - 百分比输入统一校验：
Math.min(Math.max(progress, 0), 100) - 避免在循环中高频调用（如 requestAnimationFrame 里反复 setAttribute），改用一次 style 批量更新
IE 兼容与 dasharray 在 Safari 中的渲染差异
IE11 对 stroke-dasharray 支持正常，但不支持 getTotalLength()（返回 0），必须 fallback 到手动计算周长；Safari（尤其是 iOS 15 前）在 transform + dasharray 组合下偶发渲染错位，表现为进度条“抖动”或起点偏移。
这不是 bug，而是不同引擎对 SVG 渲染管线的优化策略差异。解决思路不是绕开，而是收敛参数范围、避免小数精度干扰。
实操建议：
- IE11 下用
2 * Math.PI * parseFloat(getComputedStyle(el).r)替代getTotalLength() - Safari 中把
r设为整数，stroke-width也用整数，避免1.5px这类值引发亚像素渲染问题 - 所有计算结果用
Math.round()截断到整数，减少浮点误差累积 - 不用
will-change: transform，它在某些 Safari 版本会加剧 dash 渲染异常
环形进度看着简单，真正稳定跨浏览器运行的关键，在于对 SVG 渲染模型的理解，而不是堆砌动画库。多数问题出在起点偏移、周长误算、过渡未重置这三处，盯住它们比换方案更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
