SVG箭头动画循环不连贯及z-index层级设置问题

解决方案 #

1. 修复动画循环衔接不流畅问题

当前动画断层的核心原因是两个路径的动画周期、重置时机不一致：draw1 总时长1s，跑完就直接重置回初始状态，而draw2 总时长1.5s还在播放，自然出现断层。你可以统一两个动画的总周期，让二者同步重置：

.arrow-bottom {
  margin-top: -50px;
}
.draw1 {
  /* 统一总周期为2.5s，和draw2的总播放节奏匹配 */
  animation: animateDraw1 2.5s linear infinite;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.draw2 {
  /* 和draw1用相同的总周期，去掉单独的delay属性 */
  animation: animateDraw2 2.5s linear infinite;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}

/* draw1在前1s完成绘制，之后保持绘制完成状态到周期结束 */
@keyframes animateDraw1 {
  40% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* draw2前1s保持初始状态，后1.5s完成绘制，和draw1同步结束周期 */
@keyframes animateDraw2 {
  40% {
    stroke-dashoffset: 190;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

2. 实现Back-Copy元素藏在div后方的效果

SVG内部元素不支持CSS的position、z-index属性，你当前给g标签加的层级样式是无效的，按以下步骤调整即可：

• 第一步：删除SVG内部两个g标签上的style="position: absolute; z-index: xxx"属性
• 第二步：给包含上层div和该SVG的父容器设置position: relative
• 第三步：给需要盖在SVG上方的div设置position: relative; z-index: 2，div自然会覆盖住下方SVG的对应区域
• 第四步：微调SVG的位置，让Back-Copy路径刚好处于div的覆盖范围内即可

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