Angular Safari 12上SVG显示错误

我有一个倒计时SVG在Angular+2上工作，它在结束前10秒变为红色。在Chrome和Firefox上，这种风格运行良好，但在Safari上，正如您在图像上看到的那样，它显示出错误。我需要它在Chrome和Safari上显示相同的样式。我一直在尝试溢出的一切，但它不工作

Chrome上的SVG图像：

Safari上的SVG图像：

角度html代码：

<!-- Countdown timer animation Mobile -->
<div [className]="myClass">
  <svg style="fill: rgba (0,0,0,0.0001);" width="136" height="136" *showItSizes="{max: 767}">
    <circle r="64" cy="64" cx="63"></circle>
  </svg>
</div>

<!-- Countdown timer animation Desktop-->
<div [className]="myClass">
  <svg style="fill: rgba (0,0,0,0.0001);" width="146" height="145" *showItSizes="{min: 768}">
    <circle r="69.85699" cy="66" cx="68"></circle>
  </svg>
</div>

<!-- countdown container -->
<div class="logout-card__countdown">
  <p class="logout-card__countdown--start">{{start}}</p>
  <span class="logout-card__countdown--text">segundos</span>
</div>

---

你有问题我并不完全感到惊讶。您正在混合3D变换、溢出和边界半径

我建议您修复SVG：

• 使SVG具有正确的大小，而不是依赖于溢出
• 去掉边界半径。我甚至不知道你为什么有它
• 在SVG中使用简单的旋转变换，并调整动画以使倒计时朝正确的方向进行

我不能用Safari进行测试，但我希望这个简化版本能更好地为您服务。它应该做到：

svg{
填充：rgba（0,0,0,0.0001）；
}
svg圆{
行程：440px；
行程偏移：0px；
笔划线头：圆形；
笔画宽度：11px；
填充不透明度：0.01；
动画：倒计时60秒线性向前；
笔画：橙色；
}
@关键帧倒计时{
到{
行程偏移：-440px；
}
}

在最新的chrome和safari中为您试一试。在铬合金中工作良好。在Safari中，你会得到一个倒转的行为，它画出一个环，而不是移除/消失动画，以相同的起始品脱。但笔划的厚度与测试相同。我忘了Safari有一个带有负DashOffset的bug。我已经添加了一个新版本，希望现在可以在Safari上使用。谢谢Paul！！我用的是border radious，所以我可以在橙色笔划的中心画一条细线。iOS的问题已经解决，但设计是错误的。有没有办法把细线的zindex改到后面？这是我的钢笔，把薄薄的圆圈放在另一个圆圈之前。在SVG中，事物是从后向前绘制的。

svg {
    position: relative;
    top: 13px;
    transform: rotateY(-180deg) rotateZ(-90deg);
    fill: rgba (0,0,0,0.0001);

    border-radius: 50%;
    overflow: visible;

    circle {
      stroke-dasharray: 410px;
      stroke-dashoffset: 0px;
      stroke-linecap: round;
      stroke-width: 11px;
      fill-opacity: 0.01;
      animation: countdown 60s linear forwards;
    }

    @keyframes countdown {
      from {
        stroke-dashoffset: 0px;
      }
      to {
        stroke-dashoffset: 410px;
      }
    }
  }

  &__countdown{
    position: relative;
    bottom: 114px;

    &--start{
      font-size: 50.5px;
      font-weight: 300;
    }

    &--text{
      font-weight: 600;
      font-size: 14px;
    }
  }