svg描边抽离动画本质是通过stroke-dashoffset控制虚线起始偏移量实现路径绘制或擦除，需先用gettotallength()获取精确路径长度，设stroke-dasharray=长度且stroke-dashoffset=长度初始化隐藏，再用css动画或js动态改变offset值。
SVG描边抽离动画（Stroke-dashoffset）本质是通过控制虚线的“起始偏移量”制造路径被逐步画出或擦除的视觉效果，关键在于正确设置 stroke-dasharray 和 stroke-dashoffset 两个属性，并用 CSS 或 JavaScript 驱动 offset 变化。
一、理解 stroke-dasharray 和 stroke-dashoffset 的作用
stroke-dasharray 定义虚线模式，例如 "10,5" 表示“画10单位、空5单位”循环；若设为单个值如 "100"，等价于 "100,100"。更关键的是：当它等于路径总长度（如 "240"），就生成一条“全虚、但只显示第一段”的隐形线——此时配合 stroke-dashoffset 就能滑动显示。
stroke-dashoffset 是虚线图案的横向偏移量。正值向右推（隐藏起点）、负值向左拉（提前露出）。描边抽离动画就是让 offset 从「路径全长」线性减到 0（画出），或从 0 减到「负全长」（擦除）。
二、获取路径长度并初始化 SVG 样式
不能靠估算，必须用 JS 获取真实路径长度：
- 选中
<path></path>元素（如const path = document.querySelector('#myPath');） - 调用
path.getTotalLength()得到精确数值（如返回238.72） - 在 CSS 中设置：
stroke-dasharray: 238.72;<br>stroke-dashoffset: 238.72;
此时路径完全不可见（虚线起点被偏移到末尾之外）
三、用 CSS 动画实现描边绘制
添加一个 @keyframes，让 stroke-dashoffset 从全长过渡到 0：
@keyframes draw {
to { stroke-dashoffset: 0; }
}
然后绑定到路径：
- 加上
animation: draw 2s ease-in-out forwards; -
forwards确保动画结束后保持offset: 0状态，不会回弹 - 若想反向“擦除”，把
to改成stroke-dashoffset: 238.72;，并初始设为0
四、用 JavaScript 精确控制时机与交互
CSS 动画适合页面加载即播，但滚动触发、点击重播等场景需 JS：
- 修改样式：
path.style.strokeDashoffset = 238.72 - progress * 238.72;（progress 为 0→1） - 用
requestAnimationFrame或gsap.to()平滑过渡 - 监听 scroll 事件，根据元素进入视口比例动态更新 offset，实现“滚动绘制”效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
