环形进度指示器用SVG 的描边模拟填充，核心是stroke-dasharray设为“周长 周长”、stroke-dashoffset动态控制显示弧长；需固定r="45"、viewBox="0 0 100 100"、cx/cy="50"，并用rotate(-90)校准起点。
环形进度指示器的 SVG
环形进度本质是用一个 stroke）来模拟“填充”，不是靠 fill。关键在于控制描边的起始位置和长度——这靠 stroke-dasharray 和 stroke-dashoffset 配合实现。
一个标准圆的周长是 2 * π * r，所以先得固定 r（比如 45），再算出周长（约 282.74）。这个值就是你后续动画的“满刻度”。stroke-dasharray 设为 "282.74 282.74" 表示“实线段长 = 周长，空白段也 = 周长”，这样整个圆默认不可见；再用 stroke-dashoffset 向后偏移，就能“露出”一段弧。
常见错误：直接写死 r="45" 却没同步更新 stroke-dasharray 值；或者把 cx/cy 设在 0,0 但没给 加 viewBox，导致圆被裁剪。
实操建议：
-
是必须的，让坐标系稳定，不依赖容器宽高 - 圆心设为
cx="50" cy="50"，半径r="45"，留出 5px 边距防描边溢出 - 用 JS 动态计算周长：
const circumference = 2 * Math.PI * 45;，别手算四舍五入
如何用 CSS @keyframes 控制进度动画？
CSS 动画只适合简单、固定节奏的进度变化（比如加载中旋转一圈）。它通过改变 stroke-dashoffset 实现“从无到有”的展开效果。
核心逻辑：初始 stroke-dashoffset = 周长（完全隐藏），结束时 = 0（完全显示）。注意方向：SVG 默认顺时针绘制，所以 offset 减小 = 弧线增长。
常见错误：动画里写 stroke-dashoffset: 0; 到 282.74px（反向了，会消失）；或没加 transform: rotate(-90deg)，导致进度从 3 点钟方向开始，不符合直觉。
实操建议：
- 加
transform="rotate(-90 50 50)"到 - CSS 动画定义：
@keyframes draw { from { stroke-dashoffset: 282.74; } to { stroke-dashoffset: 0; } } - 绑定动画时加
stroke-linecap: round，避免起点/终点露尖角
JS 动态更新进度时，stroke-dashoffset 怎么算？
当你要把进度从 0% → 73%，不能直接设 offset = 73。真实公式是：offset = circumference * (1 - progress / 100)。
例如：周长 282.74，进度 30%，则 offset = 282.74 * 0.7 ≈ 197.92。这个值越小，显示弧越长。
常见错误：用 offset = progress * 2.8274（误把百分比当绝对长度）；或没考虑动画过渡，直接 .setAttribute() 导致跳变；或忽略浏览器对小数精度的处理（建议保留 2 位小数）。
实操建议：
- 封装一个更新函数：
function setProgress(p) { const offset = circumference * (1 - p/100); circle.style.strokeDashoffset = offset.toFixed(2); } - 加 CSS 过渡：
transition: stroke-dashoffset 0.3s ease，让变化平滑 - 如果进度来自 API，记得校验输入：
p = Math.min(100, Math.max(0, p))
为什么 stroke-dasharray 有时要设成两个值？
stroke-dasharray="A B" 表示“实线 A，空隙 B，实线 A，空隙 B……”无限循环。环形进度只需一段实线，所以第二个值只要 ≥ A 就能确保只画一次弧。
设成 "282.74 282.74" 是为了保险：即使 offset 算错一点点，也不会出现第二段弧。但若你确定只用单段，"282.74"（单值）也合法，浏览器会自动补全为 "282.74 282.74"。
容易被忽略的点：某些旧版 Safari 对单值 stroke-dasharray 支持不稳定，生产环境建议坚持双值写法；另外，若同时用 CSS 动画 + JS 更新，CSS 的 stroke-dasharray 值不能被 JS 覆盖（否则动画失效），应只动 stroke-dashoffset。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
