必须配合svg 和动态周长计算，因 stroke-dashoffset 是与周长强绑定的绝对偏移量，写死数值会导致缩放、响应式或半径变化时进度错位；默认起点在3点钟方向，需用 transform="rotate(-90 50 50)" 校正至12点钟方向。
直接用 stroke-dashoffset 做环形进度条加载动画，必须配合 SVG <circle></circle> 和动态周长计算，纯 CSS（比如 transform: rotate() 或 clip-path）在安卓 WebView、旧版 Safari 和部分高 DPI 设备上会错位、卡顿或完全不生效。
为什么 stroke-dashoffset 不能单独写死值
stroke-dashoffset 是“向后偏移”实线起点的长度，不是百分比。它和圆周长强绑定：偏移量从周长减到 0，才对应进度从 0% 到 100%。写死一个数值（比如 157）看似省事，但一旦 r 改了、viewBox 缩放、或需要响应式适配，进度立刻错位。
- 必须先算周长：
const circumference = 2 * Math.PI * radius（例如r="45"→circumference ≈ 282.74） - 0% 对应
stroke-dashoffset = circumference（整圈隐藏） - 60% 对应
stroke-dashoffset = circumference * (1 - 0.6)（即circumference * 0.4） - 别漏负号逻辑：值越小，显示越长；值越大，越空
如何让进度从顶部开始而不是右侧
SVG <circle></circle> 默认绘制起点在 3 点钟方向（正右方），但人眼习惯 12 点钟为 0% 起点。不修正会导致进度“顺时针甩一圈再开始”，视觉反直觉。
- 加
transform="rotate(-90 50 50)"（假设圆心是cx="50" cy="50"） - 注意旋转中心必须和
cx/cy一致，否则圆会平移 - 不要用
transform: rotate(-90deg)这类 CSS 写法——它作用于整个元素盒，不是路径原点 - 如果用 JS 动态设置，记得用
setAttribute('transform', 'rotate(-90 50 50)')，而非style.transform
transition 在哪些场景会失效
CSS 的 transition: stroke-dashoffset 0.3s ease 在多数现代浏览器里能用，但在安卓 4.4–6.x 的 WebView、部分 iOS 12 以下 Safari 中会被忽略——动画直接跳变，没有过渡。
- 稳妥做法：JS 控制帧级更新，用
requestAnimationFrame插值，而非依赖 CSS 过渡 - 若坚持用 CSS transition，必须把声明写在内联
style上（如<circle style="transition: stroke-dashoffset 0.3s ease"></circle>），避免被外部 CSS 类覆盖 - 别对
stroke-dasharray做 transition——它只在初始渲染时起作用，运行中改它不会触发重绘动画 - 动画结束时，确保最终
stroke-dashoffset值精确等于目标值（浮点误差会导致最后一帧轻微抖动）
背景环和前景环怎么分层才不出错
环形进度条需要两个独立 <circle></circle>：一个静态背景环（track），一个动态前景环（progress）。混用同一个 <circle></circle> 改颜色或宽度，会导致描边对齐错位、两端接缝明显。
- 背景环：只设
stroke、stroke-width、fill="none"，不设stroke-dasharray或transform - 前景环：设
stroke-dasharray="circumference"、stroke-dashoffset="circumference"、transform="rotate(-90 50 50)"，并加stroke-linecap="round"消除尖角 - 两者的
cx/cy/r必须完全一致，否则会出现同心但偏移的“双环”现象 - 文字居中建议用
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"></text>，别用绝对像素
最易被忽略的是：所有尺寸（r、cx、cy）必须基于 viewBox="0 0 100 100" 的相对坐标系，而不是固定像素。否则缩放时 stroke-dashoffset 和旋转中心就不同步，进度环会在容器边缘“漂移”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
