stroke-dashoffset是环形进度条核心控制手段，因其通过偏移虚线起点实现描边从全隐藏到全显示的进度效果，需配合stroke-dasharray="c c"使用；周长c=2πr宜用css变量--circum:calc(23.1416var(--r))动态计算；动画须设初始offset为--circum、禁用%，js控制时按circum*(1-p)换算偏移量。
为什么 stroke-dashoffset 是环形进度条的核心控制手段
因为 SVG 圆形的描边是“从 12 点钟方向顺时针绘制”的，stroke-dashoffset 控制的是虚线起点的位置偏移量。当它从最大值（等于周长）减到 0，视觉上就是描边从“全隐藏”逐步“展开成整圈”——这正好对应加载进度 0% → 100%。
关键前提是必须先设置 stroke-dasharray：它定义“画一段、空一段”的重复模式。对环形进度条，通常设为 stroke-dasharray="C C"（C 是圆周长），这样整个描边变成“实线段长度=C，空白段长度=C”，再配合 stroke-dashoffset 移动起点，就能实现平滑覆盖效果。
如何计算圆周长并绑定到 CSS 变量中
SVG <circle></circle> 的周长是 2 * π * r，但硬编码数值不灵活。推荐用 CSS 自定义属性 + calc() 动态算：
- 在 SVG 中给
<circle></circle>设置r="50"，并在父容器上定义--r: 50 - CSS 中写：
--circum: calc(2 * 3.1416 * var(--r))（π 取 4 位足够） - 然后
stroke-dasharray: var(--circum); stroke-dashoffset: var(--circum);
注意：如果用 % 或视口单位（如 vw）定义 r，CSS 变量需配合 clamp() 或 JS 更新，否则 calc() 无法在运行时重算。
stroke-dashoffset 动画卡顿或跳变的常见原因
最常踩的坑不是写法错，而是动画触发时机和数值精度问题：
- 初始状态没设
stroke-dashoffset，浏览器会从0开始动画，导致“反向闪一下”——务必在未动画时显式设为var(--circum) - 用
%做动画终点（如to { stroke-dashoffset: 0% }）会失效，stroke-dashoffset不支持百分比值，必须用绝对长度单位（px、em或 CSS 变量） - 动画时长太短（
200ms）或过长（3s）都易感知卡顿；建议用cubic-bezier(0.34, 1.56, 0.64, 1)模拟缓入缓出，避免线性过渡的机械感
示例动画片段：
@keyframes circle-load {
from { stroke-dashoffset: var(--circum); }
to { stroke-dashoffset: 0; }
}
如何用 JS 动态控制进度值（比如加载到 65%）
不能直接把 65% 当作 stroke-dashoffset 值——它需要换算成剩余未绘制的偏移量：
- 当前进度 p（0–1），则偏移量 =
circum * (1 - p) - JS 中获取
--circum值：getComputedStyle(el).getPropertyValue('--circum')，注意返回带单位（如"314.16px"），需parseFloat()提取数字 - 设样式：
circle.style.strokeDashoffset = circum * (1 - 0.65) + 'px';
特别注意：若 SVG 被缩放（transform: scale(0.8)）或父容器有 viewBox 缩放，r 值和周长仍按原始坐标系计算，无需额外调整——stroke-dasharray 和 stroke-dashoffset 本身是 SVG 坐标系内的长度，不受 CSS 缩放影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
