svg gif动画落后于Firefox

Question

当我点击按钮时，圆圈爆炸，它在chrome，safari和opera中完美运行，但在firefox中它很多。

有没有解决这个问题？

这是我的jsfiddle

JSFiddle

<button onclick="myFunction()">Click me</button>

<svg version="1.1" viewbox="0 0 1147.148 859.25" class="svg-content">
  <g>
    <circle cx="470" cy="242" r="20"></circle>
    <text x="470" y="249"></text>
  </g>
  <g>
    <circle cx="380" cy="225" r="20"></circle>
    <text x="380" y="232"></text>
  </g>

  <defs>
    <pattern id="explosion" x="0%" y="0%" height="100%" width="100%" viewbox="0 0 512 512">
      <image id="nuke_gif" x="0%" y="0%" width="512" height="512"></image>
    </pattern>
  </defs>

</svg>

// JavaScript
document.getElementById('button').onclick = function() {
    let circle = document.getElementsByTagName('circle')[0];
    let nukeGif = document.getElementById('nuke_gif');
    // try to fool the browser that it is always a new image with Math.random()
    nukeGif.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "http://www.clipartbest.com/cliparts/4T9/Ejk/4T9Ejkbjc.gif?" + Math.random());

    circle.setAttribute('r', 45);
    circle.setAttribute("fill", "url(#explosion)");
    setTimeout(function() {
        circle.setAttribute('r', 20);
        circle.removeAttribute("fill", "url(#explosion)");
    }, 1000);
}