直接设 stroke-dasharray 常常不转圈，是因为未用 getTotalLength() 获取 SVG 圆的真实周长，导致数值错位；正确做法是 DOM 加载后调用该方法获取周长，并固定 stroke-dasharray 为“周长,周长”，再通过 stroke-dashoffset 从周长值渐变至 0 实现 0%→100% 动画。
为什么直接设 stroke-dasharray 常常不转圈？
因为 SVG 圆形路径（<circle>）的总长度不是凭空算出来的，得先用 getTotalLength() 算出真实周长，否则填任意数字都会错位或卡住。常见现象是：进度条只显示一小段、突然跳变、或者完全不动。
实操建议：
- 必须在 DOM 加载完成后调用
getTotalLength()，不能写死数值（比如200或314） - 若用 JS 动态更新，每次修改前先缓存一次长度，避免重复计算
- 注意：CSS 里不能调用
getTotalLength()，它只能在 JS 中运行
如何用 stroke-dasharray 和 stroke-dashoffset 配合实现“从 0% 到 100%”动画？
核心逻辑是固定虚线总长（即周长），再通过偏移量把“实线起点”从最右顺时针往左推——偏移越大，露出的实线越短，看起来就是“进度减少”。所以 100% 对应 offset = 0，0% 对应 offset = totalLength。
示例（JS 控制）：
立即学习“前端免费学习笔记（深入）”；
const circle = document.querySelector('circle');
const radius = 45;
const circumference = 2 * Math.PI * radius; // 或用 circle.getTotalLength()
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference; // 初始隐藏
<p>// 模拟加载到 60%
const progress = 60;
circle.style.strokeDashoffset = circumference * (1 - progress / 100);注意：stroke-dasharray 第二个参数是 gap 长度，填和第一个相同值能确保无缝衔接；若只写一个值（如 stroke-dasharray: 283），浏览器会自动补 gap 为剩余部分，但行为不稳定，尤其在动画中。
用 CSS @keyframes 动画时，stroke-dashoffset 为什么有时不生效？
因为 SVG 元素默认不触发 CSS 动画，除非显式声明 transform: rotate(0) 或加 will-change: stroke-dashoffset 触发硬件加速；更常见的是动画属性没被识别——stroke-dashoffset 是 SVG 特有属性，必须在支持它的环境中使用（现代浏览器都行，但 IE 完全不支持）。
实操建议：
- 动画定义里必须包含
stroke-dashoffset，不能只靠 JS 改 - 初始状态（
from）要设明确值，例如stroke-dashoffset: 283，不能留空或 inherit - 若用 CSS-in-JS 或框架（如 React），确保内联样式优先级高于 CSS 类，否则会被覆盖
环形进度条在不同尺寸下怎么保持比例？
硬编码 r="45" 或固定 viewBox="0 0 100 100" 是安全做法。一旦用百分比或 rem 设置 r，getTotalLength() 返回值就不可靠（SVG 渲染前无法准确测量）。
推荐结构：
<svg viewBox="0 0 100 100" width="200px" height="200px">
<circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="8"/>
<circle cx="50" cy="50" r="45" fill="none" stroke="#4caf50" stroke-width="8"
stroke-dasharray="283 283" stroke-dashoffset="283"/>
</svg>关键点：
-
viewBox固定坐标系，外部用width/height控制缩放，所有计算基于 viewBox 内单位 -
r="45"是相对于 viewBox 的，不是像素，这样缩放时周长比例不变 - 283 来自
2 * Math.PI * 45 ≈ 282.74，向上取整避免小数截断导致缝隙
真正麻烦的不是画圆，而是让 offset 在各种缩放、重绘、SSR 场景下始终对齐——务必在 SVG 进入视口后再读取 getTotalLength()，而不是组件挂载就执行。
