SVG路径描边动画的核心是用stroke-dasharray设路径总长、stroke-dashoffset从全长渐变至0，配合@keyframes实现“画线”效果；需确保路径有stroke、使用内联SVG、计算getTotalLength()，并用forwards保持终态。
SVG 图标实现路径描边动画，核心是用 stroke-dasharray 配合 stroke-dashoffset 控制“虚线长度”和“起始偏移”，再通过 CSS @keyframes 动画驱动偏移变化，让描边看起来是从头到尾“画出来”的效果。
1. 确保 SVG 路径有 stroke 属性
描边动画只对带 stroke 的路径生效。原始图标若只有 fill，需先转为描边（或保留 fill 但额外加 stroke）：
- 在 SVG 中给
stroke="#000"、stroke-width="2"、fill="none" - 确保路径是闭合或有意图的开放路径（如箭头、勾号），否则动画起点/终点可能不自然
- 推荐使用内联 SVG（而非
2. 计算并设置 stroke-dasharray 和 stroke-dashoffset
stroke-dasharray 定义虚线模式，设为 总路径长度 可让整条路径变成“一条实线”；stroke-dashoffset 控制这条线从哪开始显示。动画就是让 offset 从“全长”变到“0”：
- 用 JS 或工具（如 SVGOMG、浏览器控制台）获取路径的
getTotalLength()值，比如得到120 - CSS 中设：
stroke-dasharray: 120;、stroke-dashoffset: 120; - 初始状态：偏移 120 → 线完全不可见；动画结束：偏移 0 → 线完整显示
3. 用 keyframes 写描边动画
定义一个从大 offset 到 0 的动画，作用于 stroke-dashoffset：
立即学习“前端免费学习笔记（深入）”；
@keyframes draw {
to { stroke-dashoffset: 0; }
}
.path {
stroke-dasharray: 120;
stroke-dashoffset: 120;
animation: draw 1.2s ease-in-out forwards;
}
-
forwards保证动画停在最后一帧（即描完不回退） - 可加
animation-delay控制多个路径的先后顺序（适合多路径图标） - 若想“反向画”（从末尾开始），把
stroke-dashoffset初始值设为0，动画改为to { stroke-dashoffset: -120; }
4. 多路径协调与优化技巧
复杂图标常含多个
- 给每条 path 加 class（如
.path-1,.path-2），分别设置不同stroke-dasharray和延迟 - 用
stroke-linecap: round或square让端点更柔和或利落 - 避免在动画中改变
stroke-width或stroke颜色——会触发重排，影响性能；颜色变化建议用transition单独处理
基本上就这些。关键不是参数多复杂，而是理清“dasharray 定长度、dashoffset 控显隐、动画推 offset”这个逻辑链。试一次就知道，不复杂但容易忽略路径长度计算这一步。
