时间戳

首页 > 解决方案 > IE/Edge 上的 SVG 脉冲动画

html - IE/Edge 上的 SVG 脉冲动画

问题描述

我在 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

标签： htmlcssanimationsvg

解决方案

解决方案是使用 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();

推荐阅读