<p>SVG圆形进度条应优先用<circle>实现，起始点需通过transform: rotate(-90deg)校正至12点钟方向，周长必须用2 Math.PI r精确计算，stroke-dasharray与stroke-dashoffset须为数值且配合will-change: transform触发GPU加速，CSS变量动态控制时需用calc()正确包裹表达式。</p>
SVG圆形进度条的path路径怎么画才对
圆环本质是用<circle>或<path d="M...">描边实现，但必须确保起始点在12点钟方向、顺时针绘制，否则stroke-dasharray动画会反向或错位。最稳妥的是用<circle>：它天然支持cx/cy/r，且stroke-dashoffset行为可预测。
常见错误是直接套用网上“从3点钟开始”的<path>写法，结果进度从右往左跑——移动端用户会明显觉得违和。正确做法是让stroke-dashoffset从最大值递减，配合transform: rotate(-90deg)把0°起点扳到顶部。
-
<circle cx="50" cy="50" r="40">，半径r决定圆大小，stroke-width不能超过2*r，否则视觉溢出 - 周长计算必须用
2 * Math.PI * r，硬写251.2这类近似值在高DPI屏上会露马脚 - 别用
viewBox="0 0 100 100"却设width="200px"又没设height，iOS Safari会缩放失真
dasharray + dashoffset动画卡顿或跳变的原因
CSS动画触发重排（reflow）就会卡，而stroke-dasharray和stroke-dashoffset本身是CSS可动画属性，但**必须搭配will-change: transform或强制GPU加速**，否则Android WebView和旧版iOS Safari大概率掉帧。
另一个高频问题是用%单位写dasharray，比如stroke-dasharray: 100%——这在SVG里不合法，必须是数值（如251.2）或none。百分比只对CSS属性有效，对SVG属性无效。
立即学习“前端免费学习笔记（深入）”；
- 动画用
@keyframes而非transition，因为进度条通常要从0%到100%完整播放，transition依赖状态切换，易受JS执行时机干扰 -
dashoffset初始值设为周长（如251.2），终点设为0；反着设会导致动画逆向 - 加
transform: translateZ(0)或will-change: stroke-dashoffset（注意：部分安卓浏览器不支持后者）
如何用CSS变量动态控制进度值
硬编码@keyframes只能做固定进度，实际项目需要JS传入当前百分比。用CSS自定义属性（--progress: 75）配合calc()是最轻量方案，避免内联style污染DOM。
关键在于把百分比换算成dashoffset：周长 × (1 − 进度/100)。注意calc()里不能混用单位，251.2 * (1 - var(--progress) / 100)会报错，得写成calc(251.2 * (1 - var(--progress) / 100))——括号必须包住整个表达式。
- JS设置：
el.style.setProperty('--progress', currentPercent)，别用el.setAttribute('style', ...)覆盖原有样式 - 兼容性兜底：Safari 13.1以下不支持
calc()在stroke-dashoffset里，需用JS直接写style.strokeDashoffset - 移动端触摸操作中频繁更新进度时，加节流（throttle），否则iOS上
requestAnimationFrame也救不了渲染队列
iOS Safari里动画突然中断的隐藏条件
Safari有个冷知识：当包含SVG的容器被position: fixed或transform后，其内部@keyframes动画可能被暂停，尤其在页面滚动或键盘弹出时。这不是bug，是WebKit的资源调度策略。
更隐蔽的是dasharray值如果含小数（如251.333），Safari会四舍五入到整数再计算，导致最终dashoffset偏差0.5px以上，肉眼可见“卡一帧”。解决方案是全程用整数周长（r=40 → 251），或用Math.round(2 * Math.PI * r)预计算。
- 禁用
pointer-events: none在SVG父容器上，否则iOS Safari可能忽略touch事件，间接导致进度更新失效 - 不要给
<svg>设width: 100vw又没设height，viewport缩放时Safari会重绘SVG导致动画重置 - 真机调试时开Web Inspector → Rendering → “Paint flashing”，看是否每帧都在重绘整个SVG（应只重绘描边区域）
实际动效是否丝滑，80%取决于周长计算精度和GPU加速的触发时机，剩下20%藏在iOS Safari那些不报错也不警告的渲染策略里。
