Javascript Safari中奇怪的svg/路径动画行为

当我使用

笔划dasharray

和

笔划dashoffset

如第条所述

当我添加“animate”类时，路径在所有浏览器中都是animates（除了Edge）。Safari也会为路径设置动画，只是它的结束状态看起来有点奇怪

您可以看到整个

svg

（红色圆圈中的边）

我尝试了

overflow:hidden

或

z-index

，但没有帮助。如果你稍微调整一下窗口的大小，正方形就消失了，一切看起来都正常

---

有什么建议可以解决这个问题吗？

svg

缺少

背景色的样式。只需在
svg
上放置与
body
相同的
背景色即可：

CSS:

svg{
  background-color: #CA1; // should be the same as on the body
  ...
}

你的意思是除了下载webkit源代码并修复其中的bug之外？那将非常棒：）不，我希望有一个简单的css破解。例如，我可以如下修复它：哇，这就成功了，不确定添加背景色是否有任何意义，但它很有效，thnx很多！！
div {
    border-radius: 50%;
    border: 10px solid red;
    overflow: hidden;
}

path {
    stroke-dasharray: 282 282;
    stroke-dashoffset: 282;
    transition: stroke-dashoffset 1s linear;

    &.animate {
      stroke-dashoffset: 0;
    }
}

svg{
  background-color: #CA1; // should be the same as on the body
  ...
}