SVG показывает неправильно на Safari 12

Question

У меня есть обратный отсчет SVG, работающий над Angular + 2, он становится красным за 10 секунд до конца.В Chrome и Firefox стиль работает хорошо, но в Safari он показывает неправильно, как вы можете видеть на изображениях.Мне нужно, чтобы он показывал один и тот же стиль в Chrome и Safari.Я пробовал все с переполнением, но оно не работает.

SVG-изображение в Chrome:

SVG-изображение в Safari:

Угловой 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>

SCSS для 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;
    }
  }

Answer 1

Я не совсем удивлен, что у вас проблемы. Вы смешиваете трехмерные преобразования, радиусы переполнения и границы.

Я предлагаю вам исправить 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>