IE/Edge上的SVG脉冲动画

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 -尽管它也影响半径属性，但它在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();