SVG动画以奇怪的方式在Firefox中失败

Question

我完全不知道如何描述它。 Here's a fiddle，其中包含一个Base64＆＃39; SVG，其内容为：

<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
    <path d="M2 7v2h6c.6 0 1-.5 1-1s-.5-1-1-1H2z" fill="#fff" transform="rotate(135, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="0.8s" from="405 8 8" repeatCount="indefinite" to="45 8 8" type="rotate"/>
    </path>
    <path d="M4.2 7c0 .3-.2.6-.2 1s.1.7.2 1H8c.6 0 1-.5 1-1s-.5-1-1-1H4.2z" fill="#fff" transform="rotate(45, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="1.4s" from="135 8 8" repeatCount="indefinite" to="495 8 8" type="rotate"/>
    </path>
    <circle cx="8" cy="8" fill="none" r="6" stroke="#fff" stroke-width="2"/>
</svg>

（原来它是一个隐藏在样式表中的无重复背景图片）。

现在，在Chrome中，这会产生我期望的结果：

但是在Firefox中，发生了一些奇怪的事情（请原谅gif的颜色没有了）：

如果它必须强行重新绘制区域，它似乎只渲染动画的一帧。另外，多次点击运行会将SVG渲染到不同的帧中，这让我更加困惑（当文档加载时它应该在0s ...）。

这令我感到困惑。我只能假设它是一个错误，但我想找到一个解决方法来解决它。我唯一能想到的是让它有力地重新绘制SVG快速间隔的区域，但我不知道如何去做...

有什么想法吗？

---

编辑：也许问题出现在SVG本身，但我仍然对此无能为力。

---

编辑2：如果我remove the <circle>，问题就会消失。什么？？这不是一个可以接受的解决方案......

Answer 1

我通过bug 1067375在Firefox 35中修复此问题。

Answer 2

如果删除<circle>，问题就会消失。这不是一个很好的解决方案（我仍然想要这个圈子！），所以我想：

• 如果我改为<path>该怎么办？ （没有工作）
• 如果我重新排序元素，使圆（或路径）成为第一个绘制元素怎么办？ （仍然没有运气）。

我很沮丧，但我想通了：这可能是因为Firefox认为圈子阻挡了元素，因此通过不渲染“无法反复出现的变化”来优化动画。 （即使这个假设是错误的）。

为了验证是否是这种情况，我对其中一条路径进行了更改，以便在圆圈外部进行渲染，从而使动画播放。换句话说，Firefox确实在以错误的方式进行优化。但任何＆＃34;修复＆＃34;涉及视觉变化是一个很大的禁忌;我想仍然显示预期的图形。

经过一段时间的思考，我想，好吧，它的渲染器显然是愚蠢的，对吧？然后它必须是愚蠢到被旋转的圆圈＆＃34;欺骗。猜猜看是什么！

<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
    <path d="M2 7v2h6c.6 0 1-.5 1-1s-.5-1-1-1H2z" fill="#fff" transform="rotate(135, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="0.8s" from="405 8 8" repeatCount="indefinite" to="45 8 8" type="rotate"/>
    </path>
    <path d="M4.2 7c0 .3-.2.6-.2 1s.1.7.2 1H8c.6 0 1-.5 1-1s-.5-1-1-1H4.2z" fill="#fff" transform="rotate(45, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="1.4s" from="135 8 8" repeatCount="indefinite" to="495 8 8" type="rotate"/>
    </path>
    <circle cx="8" cy="8" fill="none" r="6" stroke="#fff" stroke-width="2">
        <animateTransform attributeName="transform" begin="0s" dur="1.4s" from="135 8 8" repeatCount="indefinite" to="495 8 8" type="rotate"/>
    </circle>
</svg>

我刚刚复制了其中一个旋转并将其放入圆圈中。我这样做的原因是因为gzipping在发现重复内容时效果很好。

Here's a working fiddle

随时向Mozilla报告此事。晚安= _ =＆＃39;

Answer 3

我用js代码很简单地解决了这个bug sessionStorage.setItem（＆＃39; key＆＃39;，＆＃39; value＆＃39;）;

    if(sessionStorage.getItem('reloaded')===null){
        sessionStorage.setItem('reloaded', 'true');

        //browser is firefox?
        //http://stackoverflow.com/a/9851769/3243488
        if(typeof InstallTrigger !== 'undefined'){ //browser is firefox
             window.location.reload()
        }
    }