SVG 动画在 Safari 中向后动画答案

【问题标题】：SVG animation animates backwards in safariSVG 动画在 Safari 中向后动画
【发布时间】：2025-12-31 19:30:02
【问题描述】：

我在 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;
}
}

注意1：我也尝试过不使用@-webkit-，但结果完全相同！

注意2：我在堆栈溢出中看到了其他非常相似的问题，但没有一个得到回答。至少不能解决我的问题！谢谢。

【问题讨论】：

标签： google-chrome animation firefox svg safari

【解决方案1】：

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

【讨论】：

【解决方案2】：

Negative 在 Safari 中运行良好。

代替：

stroke-dasharray:692;

你应该使用：

stroke-dasharray:692 692;

【讨论】：