SVG 在 Safari 12 上显示错误

Question

我有一个在 Angular+2 上工作的倒计时 SVG，它在结束前 10 秒变红。在 Chrome 和 Firefox 上效果很好，但在 Safari 上显示错误，如您在图像上看到的那样。我需要它在 Chrome 和 Safari 上显示相同的样式。我一直在尝试使用溢出的所有方法，但它不起作用。

Chrome 上的 SVG 图像：

Safari 上的 SVG 图像：

Angular 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>

SVG 的 SCSS：

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

Answer 1

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

我建议你修复你的 SVG：

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

我无法使用 Safari 进行测试，但我希望这个简化版更适合您。它应该这样做：

svg {
  fill: rgba (0,0,0,0.0001);
}

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

@keyframes countdown {
  to {
    stroke-dashoffset: -440px;
  }
}

<!-- Countdown timer animation Desktop-->
<div className="myClass">
  <svg width="152" height="152">
    <circle r="70" cx="76" cy="76" transform="rotate(-90,76,76)"/>
  </svg>
</div>

更新

我忘记了 Safari 有一个错误，它不能正确处理负的 stroke-dashoffset 值。这是一个带有解决方法的新版本。

svg {
  fill: rgba (0,0,0,0.0001);
}

svg circle {
  stroke-dasharray: 440px;
  stroke-dashoffset: 880px;
  stroke-linecap: round;
  stroke-width: 11px;
  fill-opacity: 0.01;
  animation: countdown 60s linear forwards;
  stroke: orange;
}

@keyframes countdown {
  to {
    stroke-dashoffset: 440px;
  }
}

<!-- Countdown timer animation Desktop-->
<div className="myClass">
  <svg width="152" height="152">
    <circle r="70" cx="76" cy="76" transform="rotate(-90,76,76)"/>
  </svg>
</div>