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

Question

我不知道如何准确地描述它。 Here's a fiddle，带有 Base64 格式的 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

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

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

我很沮丧，但我发现：这可能是因为 Firefox 认为圆圈挡住了元素，因此通过不渲染“无论如何都不会出现”的更改来优化动画（即使它在这个假设）。

为了验证情况是否如此，我对其中一个路径进行了更改，使其呈现在圆圈之外，从而使动画播放。换句话说，Firefox 确实在以一种错误的方式进行优化。但是任何涉及视觉变化的“修复”都是一个很大的禁忌。我仍想显示预期的图形。

想了一会儿，我想，好吧，它的渲染器显然很愚蠢，对吧？那它一定是傻到被“旋转圈子”给骗了。你猜怎么着！

<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 报告此情况。晚安=_='

Answer 2

我在 Firefox 35 中通过 bug 1067375 修复了这个问题。

Answer 3

我用 js 代码非常简单地解决了这个错误 sessionStorage.setItem('key', 'value');

    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()
        }
    }