stroke-dasharray与stroke-dashoffset协同控制SVG虚线显示：前者定义虚线模式（如10,5），后者决定起始偏移；动画擦除需先设stroke-dasharray=路径总长、stroke-dashoffset=该长度使路径隐藏，再线性减至0。
stroke-dasharray 和 stroke-dashoffset 是什么关系
它们一起控制 SVG 路径的“虚线显示逻辑”： stroke-dasharray 定义虚线模式（比如 10,5 表示画 10px、空 5px），而 stroke-dashoffset 决定这个模式从哪开始“切一刀”。动画擦除感，本质就是让 stroke-dashoffset 从一个值线性变到另一个值。
关键点在于：要让整条路径“看起来是从头擦到尾”，必须先让路径“不可见”，再让它“逐步出现”。这靠的是把 stroke-dasharray 设为路径总长，再把 stroke-dashoffset 初始值设为相同长度——此时虚线起始点被推到末尾，整条线就藏没了。
常见错误现象：
- 动画不动或一闪而过 →
stroke-dasharray没设对，没等于路径实际长度 - 擦除方向反了（从右往左）→
stroke-dashoffset是从大往小变，但路径绘制方向是反的（比如<path d="M100,50 C..."></path>的起点在右） - 动画卡顿或跳变 → 用了
transform或其他属性干扰了描边渲染，或没加will-change: stroke-dashoffset
怎么准确获取 SVG 路径的总长度
不能靠肉眼估算，也不能硬写 200、500 这类数字。必须调用原生 API：getTotalLength()。它返回的是当前路径在 DOM 中的实时长度（单位 px），受 viewBox、缩放、transform 影响，但不受 CSS width/height 缩放干扰。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 在 JS 中获取后立刻存为变量，比如
const len = path.getTotalLength()，然后设置path.style.strokeDasharray = len和path.style.strokeDashoffset = len - 如果路径是动态生成或响应式变化（比如窗口 resize 后
viewBox重算），必须重新调用getTotalLength()并更新样式，否则动画错位 - 不要在 CSS 里写死
stroke-dasharray: 327—— 这个数下次路径微调就失效了
CSS 动画中 stroke-dashoffset 的起止值怎么配
核心逻辑就一条：起始时线不可见（stroke-dashoffset = 总长），结束时线完全可见（stroke-dashoffset = 0）。所以动画关键帧必须是 from { stroke-dashoffset: 327; } to { stroke-dashoffset: 0; }（假设总长是 327）。
注意几个易踩点：
- 如果路径是闭合的（比如
<circle></circle>或<path></path>以Z结尾），擦除终点和起点会重叠，可能看到“收口不严”；可加stroke-linecap: round缓解 - 动画时间别设太短（如
0.1s），人眼跟不上，容易误判为没动；也别设太长（如5s）导致交互迟滞 - 别用
ease-in-out做擦除——开头结尾慢会让“刚出现”和“快消失”阶段显得粘滞；linear最符合“匀速擦”的直觉
为什么加了 animation 却没动，或者只动一次
最常见原因是没触发重绘或没重置状态。CSS 动画默认 animation-fill-mode: none，动画结束后会恢复初始样式，也就是 stroke-dashoffset 又回到你写的初始值（比如 327），但 DOM 里这个内联样式还在，下一次动画无法从“新起点”出发。
解决方案很直接：
- 加
animation-fill-mode: forwards，让动画停在最后一帧（即stroke-dashoffset: 0） - 如果需要反复触发动画（比如 hover 多次），不能只靠
:hover+animation，得用 JS 移除再加 class，或用animation: name 0.8s forwards配合 class 切换 - 检查是否被父元素
overflow: hidden截断了描边区域——擦除动画过程中，部分路径可能被裁掉，看起来像“卡住”
复杂点往往不在数学公式，而在路径长度是否实时同步、动画是否真正归零、以及那个被忽略的 forwards。漏掉其中任何一个，擦除就只是幻觉。
