stroke-dasharray 是 svg 路径的虚线描边控制属性，通过配合 stroke-dashoffset 动态偏移虚线起始位置，使实线段沿路径滑动，实现轨迹动画效果。
stroke-dasharray 是什么，为什么能画出“运动轨迹”
它不是动画 API，而是 SVG 路径的描边裁剪工具：stroke-dasharray 控制虚线长度和间隔，配合 stroke-dashoffset 移动虚线起始位置，就能让“实线段”看起来在路径上滑动——这就是轨迹追踪效果的本质。
常见错误现象：stroke-dasharray 值设得太小，线条抖动；设成固定像素（如 10,5），换尺寸后轨迹错位；没先用 getTotalLength() 获取路径真实长度，硬写死数值导致动画不走完。
- 必须先用 JS 获取路径总长：
path.getTotalLength()，再赋给stroke-dasharray和初始stroke-dashoffset -
stroke-dasharray设为totalLength,totalLength，才能保证整条路径可被“抽出来” - 动画逻辑是：从
stroke-dashoffset = totalLength（完全隐藏）→0（完全显示），用 CSS transition 或 animation 驱动
SVG path 怎么写才适合做进度条
不是所有 <path></path> 都行。圆角矩形、环形、直线都 OK，但含贝塞尔曲线或过多次数的路径，getTotalLength() 返回值不稳定，动画容易跳变。
使用场景：环形加载（<circle></circle> 最稳）、水平进度条（<rect></rect> 或 <line></line>）、带拐角的 L 型路径（需测试长度一致性）。
立即学习“前端免费学习笔记（深入）”；
- 优先用
<circle></circle>或<line></line>：长度确定、兼容性好、getTotalLength()准确 - 用
<path></path>时，避免c/s类贝塞尔指令；可用在线工具转为多段l指令的近似路径 - 别忘了加
stroke-linecap: round，否则端点生硬，轨迹“断开感”强
CSS 动画卡顿或不动？检查这三点
最常踩的坑不是写法错，而是渲染上下文没对齐：SVG 元素没显式宽高、父容器 display 不支持 transform、或者用了 will-change 过度优化反拖慢。
错误现象：stroke-dashoffset 改了但没动画；动画只跑一次；在 Safari 里完全静止。
- 确保 SVG 有明确
width和height（非 %），且viewBox匹配，否则getTotalLength()失效 - CSS 动画必须作用在 SVG 元素本身（如
circle），不能只 animating 父<g></g>或外层 div - 用
transform: translateZ(0)强制硬件加速比will-change: stroke-dashoffset更稳妥，后者在部分 Chrome 版本引发重绘异常
怎么让进度条响应数据变化（比如 0% → 73%）
纯 CSS 无法动态计算偏移量，JS 必须介入。关键不是“怎么动”，而是“动多少”——stroke-dashoffset 的目标值 = totalLength × (1 - progress)，其中 progress 是 0~1 小数。
性能影响：频繁调用 getTotalLength() 会触发布局抖动；直接改内联 style 会阻塞渲染。
- 把
totalLength缓存为变量，只在 resize 时重新获取 - 用
element.style.strokeDashoffset = offset + 'px'（注意驼峰命名），别用setAttribute - 如果进度变化密集（如每秒更新多次），用
requestAnimationFrame聚合更新，避免 layout thrashing
真正难的不是算出那个 offset 数值，而是让 SVG 路径长度在缩放、响应式、字体加载延迟等场景下依然稳定可测——这点几乎没人提，但线上出问题八成栽在这儿。