stroke-dasharray 是 SVG 路径的虚线控制属性，需配合 stroke-dashoffset 和 @keyframes 实现“绘制”动画；必须用 getTotalLength() 获取真实路径长度并设为 "L L"，初始 offset 为 L、终点为 0 才能正确逐段显现。
stroke-dasharray 是什么，为什么能做路径动画
stroke-dasharray 不是动画属性，而是 SVG 路径的“虚线控制开关”。它本身不驱动动画，但配合 stroke-dashoffset 和 CSS @keyframes，就能让路径像被“画出来”一样逐段显现。核心原理是：把整条路径的长度设为一个实线段（dasharray = [totalLength, totalLength]），再用 dashoffset 从末尾往回“推”，视觉上就是从起点开始绘制。
常见错误是直接写 stroke-dasharray: 10 就想动起来——没用。必须先算出路径真实长度，否则动画会错位、截断或不动。
- 必须用 JavaScript 调用
getTotalLength()获取精确值，CSS 里无法直接读取 -
stroke-dasharray值推荐写成"L L"形式（如"240 240"），避免浏览器对单值解析不一致 -
stroke-dashoffset初始值应设为L，结束值设为0，才能实现“从无到有”的绘制效果
如何正确获取 path 的总长度并绑定到 CSS
不能靠目测或设计稿标注的“大概 200px”，SVG 路径受 transform、viewBox、缩放影响，只有运行时调用 getTotalLength() 才可靠。而且该方法在元素未挂载或未渲染完成时会返回 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<path>已插入 DOM 且样式已生效（比如放在window.addEventListener('load', ...)或useEffect(() => {...}, [])中） - 用
pathEl.getTotalLength()获取长度后，立刻写入内联 style：pathEl.style.strokeDasharray = `${len} ${len}` - 别用 CSS 自定义属性（
--dash-len）间接传值——多数浏览器不支持在stroke-dasharray中引用 CSS 变量
const path = document.querySelector('path');
const len = path.getTotalLength();
path.style.strokeDasharray = `${len} ${len}`;
path.style.strokeDashoffset = len;
// 然后触发动画类
path.classList.add('draw');
@keyframes 动画中 stroke-dashoffset 怎么写才不跳变
跳变（start 时闪一下、中间卡顿、结束多留一截）基本都源于起止值不匹配或 timing-function 误用。关键不是“加个 ease-in-out”，而是数值必须严格对应。
- 动画起始状态：CSS 中显式设
stroke-dashoffset: L（不能只靠 keyframes 里的0%） - 动画终点必须是
stroke-dashoffset: 0，哪怕路径含fill，也要确保描边完全覆盖 - 避免用
cubic-bezier(.2,1.5,.8,1)这类超出 y 范围的贝塞尔曲线——部分 Safari 会截断为1，导致 offset 在动画中突变为 0 - 如果路径含多个不连续子路径（
M x y L ... M x y L ...），getTotalLength()仍返回总和，但视觉绘制可能断开；此时需拆成多个<path>单独控制
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.draw {
animation: draw 1.2s ease-out forwards;
}
兼容性与性能要注意的几个硬伤
IE 完全不支持 stroke-dasharray 动画；iOS Safari 13.3–14.2 在 will-change: transform 下偶发 offset 渲染异常；更隐蔽的问题是：路径太复杂（上千个点）、或页面重排频繁时，动画帧率会骤降。
- 用
transform: translateZ(0)或will-change: stroke-dashoffset提升图层，但仅对较新 Chrome/Edge 有效；Safari 反而可能更卡 - 避免在
scroll事件里反复调用getTotalLength()——它触发 layout，高频执行等于自造卡顿 - 若需支持 IE，只能降级为 SMIL（
<animate attributeName="stroke-dashoffset" ...>），但 Chrome 100+ 已弃用 SMIL，不可混用 - 路径动画本质是“描边显隐”，不是矢量重绘——所以没法做出“笔锋粗细变化”或“墨水晕染”这类效果，别强求
最常被忽略的一点：动画结束后，stroke-dashoffset 停在 0 是 OK 的，但如果你后续 JS 想重新播放，必须手动重置 offset 为 L，否则第二次 animation 不会触发——CSS 动画不会重复应用相同值。
