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 zerofunction 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.5function pulse() {  if($('.map-circle').length) {    $('.map-circle')      .animate(      {'radius': 35.5},      {        step: function (radius) {          $(this).attr('r', radius);        },        duration: 1200      }    );  }}// Infinite animationfunction animation() {  setInterval(    function () {      pulse();      scale();    }, 1000);}animation();