SVG импульсная анимация на IE / Edge

Question

У меня есть импульсная анимация на кругах SVG, но transform: scale для кругов не работает в IE / Edge. Отлично работает в других браузерах. Есть ли способ исправить эту проблему без jquery плагинов?

  .cls-1, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 {
    transform: scale(0,0);
    -ms-transform: scale(0,0);
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform:scale(0,0);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pulse 2s infinite cubic-bezier(.5,.5,0,1);
  }

@keyframes pulse {
    25% {
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform:scale(1);
    }

}

Codepen: https://codepen.io/burianovata/pen/oNjxqom

Answer 1

Решение было изменить радиус окружности с помощью JQuery. Работает одинаково во всех браузерах и никаких дополнительных плагинов не требуется. Я также попробовал GSAP3 - имел проблему с transform-origin и Snap.svg - несмотря на то, что он также влияет на атрибут radius, он не работал в IE / Edge. Пример приведен на ссылке Codepen, указанной выше.

//Change radius to zero
function scale() {
  if($('.map-circle').length) {
    $('.map-circle')
      .animate(
      {'radius': 0},
      {
        step: function (radius) {
          $(this).attr('r', radius);
        },
        duration: 800
      }
    );
  }
}

//Change radius to initial size - 35.5
function pulse() {
  if($('.map-circle').length) {
    $('.map-circle')
      .animate(
      {'radius': 35.5},
      {
        step: function (radius) {
          $(this).attr('r', radius);
        },
        duration: 1200
      }
    );
  }

}

// Infinite animation
function animation() {
  setInterval(
    function () {
      pulse();
      scale();
    }, 1000);
}

animation();