如何在 Edge 上删除动画 SVG 上的伪像

Question

我用动画 SVG 做了一些测试。

在 Chrome 和 Firefox 上一切正常，但在 Edge 和 IE 上，动画期间会出现伪影。

这是我的代码：

var radius = 15;
TweenMax.staggerFromTo($('.blob'), 4, {
  cycle: {
    attr: function (i) {
      var r = i * 90;
      return {
        transform: 'rotate(' + r + ') translate(' + radius + ',0.1) rotate(' + (-r) + ')'
      }
    }
  }
}, {
  cycle: {
    attr: function (i) {
      var r = i * 90 + 360;
      return {
        transform: 'rotate(' + r + ') translate(' + radius + ',0.1) rotate(' + (-r) + ')'
      }
    }
  },
  ease: Linear.easeNone,
  repeat: -1
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<svg width="100%" height="500">
  <defs>
    <linearGradient id="gradient20" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#DB0061"/>
      <stop offset="100%" stop-color="#2F79D9"/>
    </linearGradient>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in2="goo" in="SourceGraphic" result="mix" />
    </filter>
  </defs>

  <g filter="url(#goo)" fill="url(#gradient20)">
    <circle class="blob" cx="17%" cy="48%" r="110" transform=""/>
    <circle class="blob" cx="8%" cy="60%" r="45" transform=""/>
    <circle class="blob" cx="13%" cy="58%" r="75" transform=""/>

    <circle class="blob" cx="42%" cy="51%" r="150" transform=""/>
    <circle class="blob" cx="35%" cy="60%" r="45" transform=""/>
    <circle class="blob" cx="50%" cy="58%" r="75" transform=""/>

    <circle class="blob" cx="60%" cy="55%" r="130" transform=""/>
    <circle class="blob" cx="68%" cy="45%" r="50" transform=""/>
    <circle class="blob" cx="65%" cy="60%" r="80" transform=""/>
    <circle class="blob" cx="60%" cy="70%" r="70" transform=""/>

    <circle class="blob" cx="83%" cy="58%" r="110" transform=""/>
    <circle class="blob" cx="84%" cy="35%" r="45" transform=""/>
    <circle class="blob" cx="87%" cy="48%" r="75" transform=""/>
  </g>
</svg>

有没有人遇到过这个问题，有解决办法吗？

Answer 1

看起来像是 MS Edge 中的错误。

我增加了 feColorMatrix 过滤器的减法部分以减少梯度上的步长。

查看结果：

var radius = 15;
TweenMax.staggerFromTo($('.blob'), 4, {
  cycle: {
    attr: function (i) {
      var r = i * 90;
      return {
        transform: 'rotate(' + r + ') translate(' + radius + ',0.1) rotate(' + (-r) + ')'
      }
    }
  }
}, {
  cycle: {
    attr: function (i) {
      var r = i * 90 + 360;
      return {
        transform: 'rotate(' + r + ') translate(' + radius + ',0.1) rotate(' + (-r) + ')'
      }
    }
  },
  ease: Linear.easeNone,
  repeat: -1
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<svg width="100%" height="500">
  <defs>
    <linearGradient id="gradient20" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#DB0061"/>
      <stop offset="100%" stop-color="#2F79D9"/>
    </linearGradient>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
      <feBlend in2="goo" in="SourceGraphic" result="mix" />
    </filter>
  </defs>

  <g filter="url(#goo)" fill="url(#gradient20)">
    <circle class="blob" cx="17%" cy="48%" r="110" transform=""/>
    <circle class="blob" cx="8%" cy="60%" r="45" transform=""/>
    <circle class="blob" cx="13%" cy="58%" r="75" transform=""/>

    <circle class="blob" cx="42%" cy="51%" r="150" transform=""/>
    <circle class="blob" cx="35%" cy="60%" r="45" transform=""/>
    <circle class="blob" cx="50%" cy="58%" r="75" transform=""/>

    <circle class="blob" cx="60%" cy="55%" r="130" transform=""/>
    <circle class="blob" cx="68%" cy="45%" r="50" transform=""/>
    <circle class="blob" cx="65%" cy="60%" r="80" transform=""/>
    <circle class="blob" cx="60%" cy="70%" r="70" transform=""/>

    <circle class="blob" cx="83%" cy="58%" r="110" transform=""/>
    <circle class="blob" cx="84%" cy="35%" r="45" transform=""/>
    <circle class="blob" cx="87%" cy="48%" r="75" transform=""/>
  </g>
</svg>

如何在 Edge 上删除动画 SVG 上的伪像

How to remove artefact on animated SVG on Edge

animation

svg

microsoft-edge