SVG动画在safari中向后动画

Question

我在illustrator中创建了一个路径，然后使用了一些CSS来对其进行动画处理。svg动画在Chrome和Firefox中工作得很好，然而，出于一个奇怪的原因，在safari中它是反向动画的！该网站是http://www.rw.limdez.eu，并位于网站的最上面的横幅。你一点击这个链接就可以看到它！你只能在桌面上看到这一点，因为对于移动端，它会将你重定向到移动端版本的页面！这是我使用的CSS：

.smallline
{
stroke-dasharray:692;
stroke-dashoffset:-692;
animation-delay: 1s!important;
animation: draw-smallline 8s 1 forwards;
}


@-webkit-keyframes draw-smallline
{
0%{
stroke-dashoffset: -692;
}
100%
{
stroke-dashoffset:0;
}
}

Note1:我在没有使用@-webkit-的情况下也尝试了一下，但是我得到了完全相同的结果！

Note2:我在堆栈溢出中看到了其他与我非常相似的问题，但都没有得到回答。至少不能以某种方式解决我的问题！谢谢。

Answer 1

负片在Safari中运行良好。

而不是：

stroke-dasharray:692;

您应该使用：

stroke-dasharray:692 692;

Answer 2

通过将0% dashoffset从-692更改为692，修复了此问题！如果我没记错的话，这是因为safari不能有效地处理负值！