SVG路径动画的核心是通过stroke-dasharray与stroke-dashoffset配合CSS3 @keyframes实现“画线”效果，需先用getTotalLength()获取精确路径长度并设为dasharray和初始dashoffset，再通过减小dashoffset完成绘制；支持渐变描边、多路径分步动画及现代浏览器兼容，但IE需降级处理。
SVG 路径动画的核心是控制 stroke-dasharray 和 stroke-dashoffset，配合 CSS3 的 @keyframes 实现“画线”效果，而非直接对 transform 或 opacity 做简单过渡。
获取路径总长度是前提
动画前必须知道路径的实际长度，否则 dash 效果会失准。不能靠 getBBox() 估算，得用原生方法：
- 在 JS 中调用
pathEl.getTotalLength()获取精确长度（单位为用户坐标） - 将该值设为
stroke-dasharray和初始stroke-dashoffset，例如：长度为 200，则设dasharray="200" dashoffset="200" - 若用 CSS 动画，建议把长度写进自定义属性（
style="--path-len: 200;"），再在 CSS 中引用
CSS 关键帧控制“绘制”过程
通过减小 stroke-dashoffset 让虚线起点向终点移动，视觉上就像笔在画线：
- 起始状态：
stroke-dashoffset= 总长度 → 线条完全不可见 - 结束状态：
stroke-dashoffset= 0 → 线条完整显示 - 示例动画：
@keyframes draw {
from { stroke-dashoffset: var(--path-len); }
to { stroke-dashoffset: 0; }
}
path { animation: draw 2s ease-in-out forwards; }
支持描边渐变与多段路径联动
SVG 路径动画可自然结合其他 CSS 特性提升表现力：
立即学习“前端免费学习笔记（深入）”；
- 用
<lineargradient></lineargradient>定义渐变色，并通过stroke: url(#grad)应用，动画过程中颜色随路径同步显现 - 多个
<path></path>可分别设置不同延迟（animation-delay），实现分步绘制，适合流程图或图标分解动画 - 若路径含
fill，注意添加fill="none"避免遮挡描边动画效果
兼容性与性能提示
现代浏览器（Chrome 45+、Firefox 26+、Safari 9.1+、Edge 79+）均支持该方案，但需注意：
- IE 不支持
stroke-dasharray的 CSS 动画，需降级为 SMIL（已废弃）或 JS 驱动 - 避免在大量路径上同时触发动画，可加
will-change: stroke-dashoffset提升渲染性能 - 响应式场景中，若 SVG 宽高变化，需监听
resize并重新计算路径长度
