Question

我在Angular + 2上有一个倒计时SVG，它在结束前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>

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>

SVG在Safari 12上显示错误

1 个答案: