AnimeJS绘制Lato字体SVG时出现截断问题求助

这种线条截断现象，主要原因是Lato字体生成的SVG路径结构和Inter不同，但也可能和你对AnimeJS的路径动画逻辑理解有关，具体拆解如下：

核心原因 #

1. 字体路径结构差异
   Lato的部分字形可能包含复合路径（Compound Paths）——也就是一个<path>元素里包含多个独立的子路径（比如字母“e”的内部闭合曲线和外部轮廓是分开的子路径）。而AnimeJS的stroke-dasharray动画默认基于getTotalLength()返回的单一路径长度计算，复合路径的总长度会被错误计算（只取第一个子路径的长度），导致后续子路径的描边动画被截断。
   而Inter字体的SVG路径大多是单一连续路径，动画逻辑可以正常适配。

2. SVG生成环节的问题
   如果是通过在线工具或自动脚本生成的Lato字体SVG，可能没有自动合并复合路径，甚至保留了多余的路径片段，进一步加剧截断问题。

解决方法 #

1. 检查并修复SVG路径结构 #

用SVG编辑工具（比如Inkscape）打开你的“Welcome”SVG：

• 选中每个字母的路径，查看是否为复合路径（Inkscape中会显示“复合路径”标签）
• 执行「路径 > 取消组合」，再「路径 > 合并」，将复合路径转为单一连续路径
• 保存修改后的SVG再测试动画

2. 调整AnimeJS代码适配复合路径 #

如果无法修改SVG，可以通过代码遍历所有子路径，累加总长度后再设置动画：

const textPaths = document.querySelectorAll('#welcome-text path');

textPaths.forEach(path => {
  let totalStrokeLength = 0;
  const pathSegs = path.pathSegList;
  
  // 遍历路径片段，计算所有子路径的总长度
  for (let i = 0; i < pathSegs.length; i++) {
    const seg = pathSegs.getItem(i);
    // 遇到新的移动指令（子路径起点），计算之前的子路径长度
    if (seg.pathSegType === SVGPathSeg.PATH_SEG_MOVETO_ABS && i > 0) {
      const subPath = path.cloneNode();
      subPath.pathSegList = pathSegs.slice(0, i);
      totalStrokeLength += subPath.getTotalLength();
    }
  }
  // 加上最后一个子路径的长度
  totalStrokeLength += path.getTotalLength();

  // 执行动画
  anime({
    targets: path,
    strokeDashoffset: [totalStrokeLength, 0],
    strokeDasharray: totalStrokeLength,
    duration: 2500,
    easing: 'easeInOutCubic'
  });
});

3. 重新生成SVG #

使用支持合并复合路径的工具生成SVG：

• 用Inkscape输入文本后，执行「路径 > 对象到路径」，再手动合并复合路径
• 确保生成的每个字母对应单一<path>元素，无嵌套子路径

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