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);    }}代码笔： https: //codepen.io/burianovata/pen/oNjxqom

Answer 1

解决方案是使用 JQuery 更改圆半径。在所有浏览器上的工作方式相同，不需要额外的插件。我还尝试了 GSAP3 - 存在变换原点问题，以及 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();