SVG路径“逐段画出”效果本质是用stroke-dasharray设为路径全长、stroke-dashoffset初始等于全长，再动画减至0；必须用getTotalLength()获取精确长度，不可用百分比。
用 stroke-dasharray 和 stroke-dashoffset 控制描边绘制节奏
SVG 路径的“逐段画出”效果本质是控制虚线的显示范围，不是靠时间轴逐点描摹。核心思路是：先用 stroke-dasharray 把整条路径变成一条“长度等于路径总长、间隙为 0”的虚线；再用 stroke-dashoffset 把这条虚线整体向后偏移，让起点藏在路径外；动画时把 stroke-dashoffset 从路径全长逐步减到 0，视觉上就是描边从头“画”出来。
关键前提是得知道路径总长度——不能手算，必须用 JS 的 getTotalLength() 获取：
const path = document.querySelector('path');
const len = path.getTotalLength(); // 返回数值，如 246.89
然后在 CSS 中设初始状态：
path {
stroke-dasharray: 246.89;
stroke-dashoffset: 246.89;
transition: stroke-dashoffset 2s ease-in-out;
}
path.drawn {
stroke-dashoffset: 0;
}
触发动画只需加类：path.classList.add('drawn')。
立即学习“前端免费学习笔记（深入）”；
为什么直接写 stroke-dasharray: 100% 不行
stroke-dasharray 不支持百分比值（除 IE 外多数浏览器会忽略），也不接受 auto 或 inherit。硬写 100% 会导致描边消失或行为不可预测。
- 路径长度动态变化（比如响应式缩放、
viewBox改变）时，必须重新计算getTotalLength()并更新内联样式或 CSS 变量 - 若用 CSS 自定义属性（如
--len: 246.89），需确保 JS 设置后 CSS 能读取到最新值（避免样式未生效就触发动画） - 某些 SVG 编辑器导出的路径含
transform，getTotalLength()仍返回原始路径长度，不受 transform 影响——这是正确行为，无需“修正”
动画卡顿或跳变的常见原因
描边动画突然闪一下、或开头/结尾停顿，大概率是以下三点之一：
- 路径没设
stroke或stroke-width，导致stroke-dasharray无效（浏览器可能静默降级） -
stroke-linecap设为round或square时，首尾端点会额外占位，但stroke-dasharray计算的是路径几何长度，不包含 cap 渲染延伸——通常影响极小，但高精度场景需留意 - 动画用
transition但没指定作用属性（如只写transition: all 2s），可能触发重排或意外属性过渡，应明确写transition: stroke-dashoffset 2s - 路径含
fill且非none，部分浏览器会在描边动画过程中重绘填充区域，造成轻微闪烁；建议显式设fill: none
配合 GSAP 或 CSS @keyframes 的注意事项
用 GSAP 动画 stroke-dashoffset 更灵活，但要注意：GSAP 默认对数字属性做插值，而 stroke-dashoffset 是带单位的 CSS 属性（如 "246.89px"）。若 JS 获取的长度是纯数字，直接传给 GSAP 是安全的；但如果手动拼了单位，就得用 css: { } 包裹或启用 attr: {}。
用 @keyframes 写法更简洁，但必须提前知道长度值：
@keyframes draw {
from { stroke-dashoffset: 246.89; }
to { stroke-dashoffset: 0; }
}
path { animation: draw 2s ease-in-out forwards; }
这意味着无法直接用于长度未知或动态生成的 SVG——这种场景必须走 JS + style.setProperty() 路线。
复杂路径（比如含贝塞尔曲线、多段 M L Q C 指令）的 getTotalLength() 在所有现代浏览器中结果一致，不用额外 polyfill；但若要支持 IE11，得用 path.getTotalLength() 的 polyfill（如 svg-path-length 库），不过 IE11 本身不支持 stroke-dasharray 动画，实际意义有限。
