在css中让复杂的svg路径产生描边动画，核心做法是利用 stroke-dasharray 和 stroke-dashoffset 属性。你需要先通过javascript或手动计算获取路径的总长度（gettotallength()），将其设为 dasharray 的值以隐藏路径，然后通过动画将 dashoffset 从该长度值过渡到0，从而实现路径逐渐显现的效果。
如何为SVG路径设置初始隐藏状态？
要让描边动画生效，必须先将路径完全隐藏。这通过将 stroke-dasharray 设置为等于路径的总长度来实现，此时整个路径被视为一个虚线段的间隔，而 stroke-dashoffset 默认偏移量使得路径不可见。对于复杂路径，这个总长度通常不是整数，因此需要动态获取。
const path = document.querySelector('path');
const length = path.getTotalLength();
// 设置CSS变量或直接设置样式
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
上述代码首先选中目标 path 元素，调用 getTotalLength() 方法获取其像素长度。接着，将该长度赋值给 stroke-dasharray，确保虚线的间隔足够长以覆盖整条路径。最后，将 stroke-dashoffset 也设为该长度，使路径起始点被“推”出可视区域，达到完全隐藏的状态。这是动画开始前必须完成的初始化步骤。
如何通过CSS实现描边显现动画？
隐藏路径后，下一步是通过CSS动画改变 stroke-dashoffset 的值。我们将 stroke-dashoffset 从路径总长度动画过渡到0。当偏移量为0时，路径完全显示；当偏移量等于长度时，路径完全隐藏。配合 transition 或 @keyframes 即可实现平滑的绘制效果。
/* CSS 部分 */
.path-animated {
stroke: #000;
stroke-width: 2;
fill: none;
transition: stroke-dashoffset 2s ease-in-out;
}
/* JavaScript 触发 */
const path = document.querySelector('.path-animated');
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
// 强制重绘以确保过渡生效
path.getBoundingClientRect();
// 开始动画
path.style.strokeDashoffset = '0';
在CSS中定义 .path-animated 类，设置 transition 属性针对 stroke-dashoffset 进行2秒的缓动变化。JavaScript部分再次获取路径长度并设置初始隐藏状态。关键一步是调用 getBoundingClientRect() 强制浏览器重排，确保初始状态被应用后再修改 strokeDashoffset 为 '0'，从而触发CSS过渡动画，使路径像被画笔绘制出来一样显现。
如何处理多段路径或不同速度的描边？
如果SVG包含多个 path 元素，或者希望不同部分以不同速度描边，需要分别控制每个路径的 stroke-dashoffset。可以通过为不同路径分配不同的CSS类，或在JavaScript中分别设置延迟和持续时间来实现。例如，第二段路径可以在第一段完成后开始动画。
const paths = document.querySelectorAll('path');
paths.forEach((path, index) => {
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
// 设置不同的动画延迟
path.style.transitionDelay = `${index * 0.5}s`;
// 触发动画
requestAnimationFrame(() => {
path.getBoundingClientRect();
path.style.strokeDashoffset = '0';
});
});
这段代码遍历所有 path 元素，为每个路径独立计算长度并设置初始隐藏状态。通过 transitionDelay 属性，为第 index 个路径增加 index * 0.5 秒的延迟，从而实现依次描边的效果。每个路径的动画持续时间由CSS中的 transition 统一控制，但启动时间错开，形成连贯的多段绘制动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
