stroke-dasharray通过设定圆周长与0的数组控制环形进度条描边截取，配合stroke-dashoffset负向偏移实现动画；需预计算周长（如r=45时取283），避免CSS动态计算、错误补全及起始方向偏差。
stroke-dasharray 是怎么控制环形进度的
环形进度条本质是 SVG <circle></circle> 的描边被“截取”了一段，靠 stroke-dasharray 和 stroke-dashoffset 配合动画实现。不是靠旋转、也不是靠遮罩——这点容易搞错。
关键点在于：圆周长必须预先算准，否则进度会不准。用 2 * Math.PI * r 算出周长后，设为 stroke-dasharray 的第一个值（比如 100），第二个值设为 0；再用 stroke-dashoffset 从 100 往 0 变，视觉上就是“画完一圈”。
-
r = 45时，周长 ≈282.74，建议四舍五入到283，别用Math.round(2 * Math.PI * r)动态算——CSS 里不支持 JS 表达式 - 如果直接写
stroke-dasharray="100"，浏览器会自动补成"100, 100"，导致虚线效果，进度跳变 -
stroke-dashoffset是负向偏移：值越大，露出越少；所以动画要从大数往小数变（如283 → 0）
CSS 动画写法要注意哪些坑
用 @keyframes 控制 stroke-dashoffset 本身没问题，但常见错误是没配 transform: rotate(-90deg)，导致进度从 3 点钟方向开始，而不是顶部（12 点钟）。
- 必须加
transform: rotate(-90deg)，让起始点对齐顶部；否则用户直觉是“从上往下走”，实际却是“从右往左绕” - 动画时长设为
1s不代表 1 秒走完 100%，它只是整个 keyframes 的执行时间；真正进度由 JS 控制stroke-dashoffset的内联值，CSS 动画只负责过渡 - 别在
<circle></circle>上写transition: stroke-dashoffset 0.3s ease—— 这会导致初始加载时闪一下（从默认 0 突然跳到目标值），应该用transition: stroke-dashoffset 0.3s ease 0.1s加个延迟起步
JS 更新进度时怎么避免卡顿或跳变
每次调用 element.style.strokeDashoffset = value 都会触发重排，高频更新（比如每 50ms）容易掉帧。尤其在低性能设备上，requestAnimationFrame 比 setTimeout 更稳。
立即学习“前端免费学习笔记（深入）”；
- 不要用
setInterval去模拟进度增长；改用requestAnimationFrame+ 时间戳计算当前百分比，更平滑 -
stroke-dashoffset必须是数字，单位不能带px或em；传字符串如"200"也能工作，但建议统一用Number类型 - 如果进度从 0→100% 后还要复位重播，记得先设
stroke-dashoffset="283"再开动画，否则会残留上一次的结束状态
IE 和 Safari 对 stroke-dasharray 的兼容差异
IE11 支持 stroke-dasharray，但不支持 stroke-dashoffset 动画；Safari 旧版（≤13.1）在 transform 和 dashoffset 同时存在时有渲染抖动。这不是 bug，是渲染管线顺序问题。
- IE11 下只能降级为旋转动画（
transform: rotate()），配合clip-path做遮罩，但复杂度陡增，建议直接显示静态图标 - Safari 中如果发现环形进度条边缘发虚或闪烁，把
shape-rendering: crispEdges加到<circle></circle>上能缓解 - 所有现代浏览器都支持
stroke-linecap: round让头尾更圆润，但 Android 4.4 WebView 不支持，若需兼容，就别设这个值
最麻烦的其实是 SVG 容器尺寸和 viewBox 的耦合——viewBox="0 0 100 100" 要和 CSS 里的宽高比例一致，否则缩放后 stroke-dasharray 计算就全乱了。这点调试时经常被忽略。
