基于stroke-dasharray实现滚动SVG描边动画时出现双动画起点问题

SVG 路径中的M（抬笔移动）命令会将后续路径段标记为独立的子路径，而stroke-dasharray和stroke-dashoffset的规则是对每一个独立子路径分别生效——这就是为什么你当前的动画会从两个位置同时启动：两个互不连接的路径段各自应用了相同的描边偏移规则，不存在连续动画的基础。
千万不要尝试把第二个M直接替换成L（直线连接），这个操作会在贝塞尔曲线终点和第二段子路径起点之间拉出一条多余的直线，直接破坏你已经调试好的路径显示效果，这也是你之前多次修改后形状不符合预期的核心原因。

方案1：拆分独立子路径，按顺序控制动画进度 #

这个方案完全不需要改动你已经调好的路径形状，仅调整DOM结构和动画逻辑即可：

• 将原来包含两个M的单<path>，拆分为两个独立的<path>元素，每个元素对应一段独立的子路径：
  • 第一个路径对应从起始M 0 0到二次贝塞尔曲线结束的所有坐标
  • 第二个路径对应从第二个M 525 180到路径终点的所有坐标
• 放弃硬编码的2000长度值，通过原生API动态获取每个路径的真实总长度：

  // 分别获取两个拆分路径的真实长度
  const path1 = document.querySelector('#shape1');
  const path2 = document.querySelector('#shape2');
  const len1 = path1.getTotalLength();
  const len2 = path2.getTotalLength();
  

• 给两个拆分后的路径分别设置初始描边配置，保证每个路径的dash值匹配自身真实长度，初始状态下完全隐藏描边
• 重写滚动触发的动画逻辑，让两个路径按先后顺序完成描边：
  • 先计算滚动的总进度值（范围0~1，对应从触发动画到滚动完成全量动画的区间）
  • 当进度处于前半段区间时，仅将第一个路径的stroke-dashoffset从自身总长度线性降到0，第二个路径保持隐藏
  • 当第一个路径完全描边完成后，再将第二个路径的stroke-dashoffset从自身总长度线性降到0
    这种方式可以模拟出从最起点到最末端连续描边的观感，且完全不会改动原有路径的视觉形状。

方案2：保留单path结构，逐段配置描边规则 #

如果不想拆分DOM元素，可以基于子路径的长度分段配置偏移量：

• 先逐段计算两个子路径的各自长度
• 设置全局的stroke-dasharray为「第一段长度、第一段长度、第二段长度、第二段长度」
• 动态调整stroke-dashoffset的值：初始状态下偏移量为「第一段长度 + 第二段长度」，随着滚动逐渐减少偏移量，先让第一段子路径的dash滑出显示，再让第二段子路径的dash滑出显示
  这种方式的逻辑和拆分路径一致，只是把动画计算放在同一个path标签上，需要手动匹配每段dash的间隔，调试成本略高。

• 不要硬编码stroke-dasharray的长度值，硬编码的估值很容易出现描边露白、提前结束的问题
• 不要通过把M改成L的方式消除多子路径，会直接生成多余的连接直线，破坏原有形状

内容的提问来源于stack exchange，提问作者Burham B. Soliman