SVG pulse animation on IE/Edge

Question

I have pulse animation on svg circles, but transform: scale for circles doesn't work on IE/Edge. Works great on other browsers. Is there any way to fix this issue without any jquery plugins?

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

}

Answer 1

The solution was to change circle radius using JQuery. Works the same on all browsers and no additional plugin is required. I also tried GSAP3 - had an issue with transform-origin, and Snap.svg - despite it also affects the radius attribute, it didn't work on IE/Edge. Example is on Codepen link listed above.

//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();