最常用可靠的方式是用 SVG 的 stroke-dasharray 和 stroke-dashoffset 配合 CSS 或 JS 控制，原理是将描边转为可滑动虚线：设 stroke-dasharray 为路径总长度，stroke-dashoffset 从全长渐变至 0 实现绘制动画，须用 getTotalLength() 动态获取真实长度并在 DOM 就绪后执行。
最常用、最可靠的方式是用 SVG 的 stroke-dasharray 和 stroke-dashoffset 配合 CSS 或 JS 控制。它不依赖 Canvas 渲染逻辑，兼容性好（IE11 也支持），动画平滑，且写法简洁。
核心原理：把描边变成“可滑动的虚线”
SVG 路径本身没有“从头画到尾”的原生动画能力。但可以利用虚线绘制机制模拟这个过程：
-
stroke-dasharray 设为路径总长度（如
"248"），相当于把整条线切成“一段实线 + 一段无限长的空隙” -
stroke-dashoffset 控制虚线图案的起始位置。初始设为
248，线条完全不可见；逐渐减小到0，就等效于“笔从起点出发，一路画到终点” - 关键前提是：必须用
getTotalLength()获取真实长度，不能硬编码或估算
正确获取路径长度并应用
长度必须在 DOM 就绪、SVG 渲染完成后再读取，否则返回 0：
- 推荐监听
DOMContentLoaded或给<svg>加onload事件 - 示例代码：
const path = document.querySelector('path'); const len = path.getTotalLength(); path.style.strokeDasharray = len; path.style.strokeDashoffset = len; - 若需响应式适配，缩放后长度会变，应监听窗口变化并重新计算
CSS 动画实现（推荐初学者）
用 @keyframes 控制 offset 变化，简洁直观：
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 中定义动画：
@keyframes draw { to { stroke-dashoffset: 0; } } path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.8s ease-out forwards; } - JS 中将长度注入 CSS 自定义属性：
svg.style.setProperty('--len', len) - 注意加
fill="none"，避免填充色遮盖描边动画
JS 动态控制（适合交互触发）
当需要点击开始、暂停、倒放或联动多个路径时，JS 更灵活：
- 用
requestAnimationFrame逐帧更新stroke-dashoffset - 支持进度控制：比如
progress = 0.6时，offset = len * (1 - progress) - 可轻松实现擦除效果：让 offset 从
0变成-len - 多路径不同步？给每个
path设置不同animation-delay或 JS 延迟启动即可
