使用anime.js实现SVG路径描边动画时如何避免线条重叠问题

问题原因 #

1. 该问题核心确实是SVG文件本身导致的：你的SVG内包含的多个<path>本身就存在物理位置重叠的区段，不同路径的动画错开100ms启动后，后续绘制的路径走到和已有路径重合的位置时，就会出现视觉上的线条重叠效果，和anime.js的配置参数无关。
2. 部分路径是带Z指令的闭合路径，anime.setDashoffset自动计算路径长度时，闭合路径的绘制起点、终点衔接位置刚好和其他路径重合，也会加重重叠的视觉感受。
3. 额外小问题：你的CSS类名定义错误，样式中写的是.svg_container，但HTML里使用的类名是svg-container，会导致你写的自适应布局不生效，不过这个和动画重叠无关。

解决方法 #

• 优先修改SVG源文件：用矢量编辑工具（Inkscape、Figma、Adobe Illustrator等）打开SVG，删除重复的路径段，合并位置完全重合的路径，确保同一坐标下只有一条路径存在。
• 若不想修改SVG，可给路径添加CSS属性优化视觉效果：

#demo_svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

以上属性可以减少抗锯齿带来的边缘重叠视觉误差。

• 调整动画逻辑：修改anime.stagger的延迟参数，或者调整路径的动画顺序，让层级更高的路径后触发绘制，避免下层路径被重叠覆盖后出现视觉错乱。
• 手动控制绘制参数：放弃anime.setDashoffset自动计算，提前手动给每个路径设置stroke-dasharray和初始stroke-dashoffset，调整闭合路径的绘制起点，避开和其他路径的重叠区域。

内容的提问来源于stack exchange，提问作者LeeTee