amCharts4 SVG路径绘制动画在Safari浏览器中出现异常

使用amCharts4生成SVG路径的绘制动画，该动画在Chrome、Firefox等浏览器中表现正常，但在Mac和iOS的Safari浏览器中，路径的起始位置随机，不符合从起点到终点绘制的预期。

所用CSS动画代码 #

#amchart {
    width : 100%;
  max-width: 100%;
    height : 500px;
}
#amchart .amcharts-animateLine1,
#amchart .amcharts-animateLine2,
#amchart .amcharts-animateLine3 {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    -webkit-animation-name: am-draw;
       -moz-animation-name: am-draw;
         -o-animation-name: am-draw;
            animation-name: am-draw;
    -webkit-animation-timing-function: ease-in-out;
       -moz-animation-timing-function: ease-in-out;
         -o-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-duration: 15s;
       -moz-animation-duration: 15s;
         -o-animation-duration: 15s;
            animation-duration: 15s;
    -webkit-animation-direction: forwards;
       -moz-animation-direction: forwards;
         -o-animation-direction: forwards;
            animation-direction: forwards;
}

@-webkit-keyframes am-draw {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes am-draw {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-o-keyframes am-draw {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes am-draw {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

已尝试的解决方法 #

• 为目标路径设置pathlength="1"，但未解决问题。

我刚接触CSS动画和SVG，若有信息缺失请告知，我会补充。

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