SVG <circle> + stroke-dasharray 是最可靠纯 CSS 环形进度条方案，兼容性好、控制精确、无需 JS 即可静态渲染，核心是通过周长计算与 stroke-dashoffset 控制起始角度实现动态进度。
用 SVG <circle> + stroke-dasharray 实现环形进度条最可靠
纯 CSS 的环形进度条在 IE 或旧版 Safari 上容易失准，而 SVG 方案兼容性好、控制精确，且不依赖 JS 就能静态渲染。核心思路是画一个圆，用描边（stroke）表示进度，再通过 stroke-dasharray 和 stroke-dashoffset 截取对应长度。
关键点：
-
r决定半径，cx/cy定位圆心，务必和viewBox匹配，否则缩放错位 - 周长必须显式计算：2 × π × r，比如
r="50"→ 周长 ≈314.16，这个值要填进stroke-dasharray - 进度 60% 时，显示段长度 =
314.16 × 0.6 ≈ 188.5，剩余空白段 =314.16 − 188.5 = 125.66，所以stroke-dasharray="188.5 125.66" -
stroke-dashoffset控制起始角度，默认从正右方开始；减小该值会让进度“顺时针旋转”展开
如何让进度随 JS 动态更新（比如加载完成时从 0% 到 85%）
直接操作 SVG 元素的 stroke-dasharray 和 stroke-dashoffset 属性即可，无需重绘整个 SVG。注意：动画要平滑，得用 transition 配合内联样式或 CSS 类。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<circle>的stroke-dasharray初始设为"0 314.16"（完全隐藏），stroke-dashoffset设为0 - 添加 CSS：
transition: stroke-dasharray 0.4s ease, stroke-dashoffset 0.4s ease; - JS 中计算目标值：
const len = 2 * Math.PI * 50; const dash = (percent / 100) * len; const gap = len - dash; - 更新属性：
circle.style.strokeDasharray = `${dash} ${gap}`;（注意驼峰写法） - 若想从顶部开始（而非默认右侧），加
transform="rotate(-90 100 100)"（假设圆心在 100,100）
用 CSS conic-gradient 做环形进度？小心浏览器支持和精度问题
conic-gradient 看似简洁，但实际落地有硬伤：Safari 15.4 之前不支持，且百分比角度在部分安卓 WebView 中会四舍五入到整度，导致 99% 和 100% 看不出差别。
如果仍要用，记住这些：
- 必须配合
background-clip: text或遮罩层，纯background无法裁成环形，得套两层元素（外圆 mask，内圆渐变） - 角度写法必须是
conic-gradient(from 0deg, #4a90e2 0%, #4a90e2 75%, transparent 75%)，不能写75deg—— 这是扇区角度，不是总进度 - 动态更新需重设整个
background字符串，CSS 变量（--p）配合calc()在 Safari 上可能不生效 - 不建议用于需要精确到 1% 的业务场景，比如支付进度、考试倒计时
为什么不要用 <canvas> 手动画弧线做环形进度条
Canvas 能画，但引入了额外复杂度：要手动算弧度、监听尺寸变化重绘、处理 DPR（设备像素比）缩放、还要自己实现动画帧逻辑。除非你已在用 Canvas 渲染大量图形，否则纯属杀鸡用牛刀。
真实踩坑点：
- 没调用
ctx.scale(window.devicePixelRatio, window.devicePixelRatio)→ 高分屏下线条模糊 - 没监听
window.addEventListener('resize', ...)→ 窗口缩放后进度条变形 - 用
requestAnimationFrame更新时忘记取消上一帧 → 内存泄漏+卡顿 - 进度 0% 时画
arc(..., 0, 0, ...)不触发绘制，但视觉上应显示空环，需额外判断并清空
SVG 方案里，这些全是自动的 —— 它原生响应式、自带抗锯齿、动画靠 CSS 就行。真正需要动手的地方，就只有那两个 dash 属性的数值计算。
