Safari

Question

使用stroke-dasharray和stroke-dashoffset为SVG路径制作动画时 如this文章

中所述

<div>
    <svg viewBox="0 0 100 100">
        <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"/>
    </svg>    
</div>

CSS：

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

当我添加`animate类时，路径在所有浏览器中都是动画（Edge除外）。 Safari也会对路径进行动画处理，除了它的结束状态看起来有点奇怪

您可以看到整个svg（红色圆圈中的边缘）

我尝试overflow: hidden或z-index但没有帮助。如果你稍微调整窗口大小，方块就会消失，一切看起来都正确。

DEMO

有关如何解决此问题的任何建议吗？

Answer 1

svg缺少background-color的样式。只需将background-color与svg上的body相同：

<强> CSS：

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

Here is it working