环形进度条本质是SVG 描边动画，通过 stroke-dasharray 设为周长（2×π×r）与 stroke-dashoffset 从周长递减至0实现进度效果；需配合 viewBox、CSS变量及JS动态计算确保精度与自适应。
stroke-dasharray 是怎么算出环形周长的
环形进度环本质是 <circle></circle> 或 <path></path> 的描边动画，关键不是“画个圆”，而是让描边“只显示一部分，并动起来”。stroke-dasharray 控制虚线模式，第一个值是实线长度，第二个是空白长度。对一个完整圆，实线长度设为周长，空白长度也设为周长，就能用 stroke-dashoffset 推动“可见段”位置，实现进度效果。
圆周长 = 2 * π * r。SVG 中若 <circle r="50"></circle>，半径 50，周长就是 314.16（取两位小数足够）。别手算——直接用 JS 算或 CSS 自定义属性存好，否则响应式缩放时周长错，动画就偏移。
常见错误：把 stroke-dasharray 设成固定值如 100, 100，结果在不同尺寸下进度条“跑出圈”或卡住不动。
- 用
calc(2 * 3.1416 * var(--r))在 CSS 中动态算周长（需确保--r是数值，单位已剥离） - 更稳妥的做法：JS 获取
getTotalLength()后写回 CSS 变量，尤其当路径是<path d="M...A..."></path>这类不规则弧时 - SVG
viewBox必须设置，否则r值在缩放后不参与比例计算，周长失效
用 CSS 变量驱动进度值和动画时要注意什么
CSS 变量本身不能直接触发重绘，但修改它 + 配合 transition 或 @keyframes 就能驱动 stroke-dashoffset 动画。核心逻辑是：进度 0% → offset = 周长；进度 100% → offset = 0。
立即学习“前端免费学习笔记（深入）”；
所以 offset = 周长 × (1 − 进度%)。这个计算必须在 CSS 里完成，不能靠 JS 每次设 offset 值——那样会打断 CSS 动画流，且无法利用硬件加速。
- 定义变量：
--progress: 0.65（0–1 范围更易计算），再用calc(var(--circum) * (1 - var(--progress)))算 offset -
stroke-dashoffset必须设transition: stroke-dashoffset 0.4s ease，否则变量改了也不动 - 动画起始点默认从 3 点钟方向顺时针开始，若要从 12 点钟开始，得加
transform: rotate(-90deg)，且该 transform 需包含在 transition 中，否则旋转和描边动画不同步 - 不要用
%单位传入变量，CSS calc 不支持变量内含单位混用，--progress: 65%会导致 calc 失效
为什么在 Flex/Grid 容器里环形会塌缩或错位
SVG 元素默认是 inline-level，且 width/height 对 <svg></svg> 内部图形无直接缩放作用——它只控制容器框大小。如果父容器是 display: flex 且没设 align-items，或用了 grid-template-columns: 1fr 却没约束 SVG 高宽，<circle></circle> 就可能被压缩变形，导致 r 失效、周长计算偏差。
- 给
<svg></svg>显式设width和height，或用aspect-ratio: 1保圆 - 避免对
<svg></svg>设max-width: 100%却不配height: auto，这会让 viewBox 缩放失衡 - 在 Flex 容器中，加
align-self: center和justify-self: center（Grid）或align-items: center（Flex）仅居中容器，不解决内部缩放；真正要 fix 的是 SVG 自身的viewBox="0 0 100 100"和preserveAspectRatio="xMidYMid meet"
移动端 touch 触发进度更新时动画卡顿怎么办
在 iOS Safari 或部分安卓 WebView 中，用 input[type="range"] 拖动更新 CSS 变量，再触发 stroke-dashoffset 过渡，常出现掉帧——因为每次 input event 都同步触发 style 更新，浏览器来不及合并重排。
- 改用
change事件代替input，减少触发频次（适合非实时拖拽场景） - 若必须实时响应，用
requestAnimationFrame节流更新变量：inputEl.addEventListener('input', () => { requestAnimationFrame(() => { el.style.setProperty('--progress', inputEl.value / 100); }); }); - CSS 侧确认
will-change: stroke-dashoffset已加在 circle 上（仅当动画频繁时启用，有内存开销） - 避免同时 animating
transform和stroke-dashoffset——两者都走合成层还好，但若transform涉及 layout（比如 scale 配合百分比 margin），就会强制重排
最易被忽略的是 viewBox 和 CSS width/height 的协同关系：哪怕所有变量和动画逻辑都对，只要 viewBox 缺失或 preserveAspectRatio 错，环在不同设备上就不是真圆，stroke-dasharray 算出来的“周长”就只是个幻觉。
