环形进度条的svg核心是用的stroke-dasharray和stroke-dashoffset控制弧线显示，而非直接画圆；需设fill="none"、固定r=50、cx/cy=60、viewbox="0 0 120 120"，周长≈314.16，stroke-dasharray="314.16,314.16"，stroke-dashoffset从314.16（0%）到0（100%）线性变化。
环形进度条的 SVG 基础结构怎么写
核心不是画圆，而是用 <circle></circle> 的 stroke-dasharray 和 stroke-dashoffset 控制“露出多少弧线”。直接写一个完整圆会变成实心圆环，必须配合描边和虚线样式才能形成可动的进度效果。
关键点：先定义一个固定半径的圆，再通过 CSS 或 JS 动态修改 stroke-dashoffset 来“拖动”起点位置，实现填充动画。
-
r决定环大小，建议统一用50（便于计算周长） -
cx/cy设为60，保证在 viewBox 居中（viewBox="0 0 120 120"） -
stroke颜色设为进度色，stroke-width推荐8（太细不明显，太粗易重叠） -
fill="none"必须加，否则内部会被填满
如何计算 stroke-dasharray 和 stroke-dashoffset
这两个值决定“哪一段显示、从哪开始显示”。假设圆半径 r = 50，周长就是 2 * Math.PI * 50 ≈ 314.16。这就是整圈的最大长度。
stroke-dasharray 设为 "314.16,314.16" 表示“画 314.16px，空 314.16px”，实际只看到前半段；stroke-dashoffset 则控制起始偏移量——值越大，进度越靠后。
- 0% 进度 →
stroke-dashoffset = 314.16（整个圆都“藏”在偏移后） - 100% 进度 →
stroke-dashoffset = 0（从起点开始画满） - 50% 进度 →
stroke-dashoffset = 314.16 * 0.5 = 157.08 - 注意：offset 是反向的——值减小，进度增加
用 CSS 实现静态进度条（无 JS）
适合固定进度、服务端渲染或简单状态展示。把计算逻辑写死在 style 里即可，不需要 JS 干预。
<svg viewbox="0 0 120 120"><circle cx="60" cy="60" r="50" fill="none" stroke="#e0e0e0" stroke-width="8" stroke-dasharray="314.16,314.16"></circle><circle cx="60" cy="60" r="50" fill="none" stroke="#4caf50" stroke-width="8" stroke-dasharray="314.16,314.16" stroke-dashoffset="157.08"> /> </circle></svg>
第一个 <circle></circle> 是背景环，第二个是进度环。两者 stroke-dasharray 相同，仅 stroke-dashoffset 不同。
- 背景环不设
stroke-dashoffset，默认为 0，但因dasharray第二项是空隙，它实际不可见 - 若要让背景环显示为浅灰环，可显式设
stroke-dashoffset="0"，并确保stroke-dasharray足够大 - 所有数值保留两位小数即可，浏览器对精度不敏感
用 JavaScript 动态更新进度（常见坑）
直接改 element.style.strokeDashoffset 是最简方式，但要注意单位——它接受纯数字，**不带 px**，且值是负数时会错乱。
- 务必用
getTotalLength()获取真实周长，别硬编码2 * Math.PI * r（若 stroke-width 影响渲染，可能偏差） - DOM 加载完成后才执行，否则
getTotalLength()返回 0 - 更新时推荐用
transform: rotate()配合stroke-dashoffset，避免因 viewBox 缩放导致计算失准 - 动画用
transition: stroke-dashoffset 0.3s ease-out，加在进度环上，不要加在 SVG 根元素
容易漏掉的一点：如果父容器设置了 width/height 但没设 vertical-align，SVG 可能底部留白——加 vertical-align: middle 或设 display: block 即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
