Firefox 38-40 SMIL 问题 - 速度非常慢（已在 2015 年 9 月 22 日的 FF 版本 41 中解决）

Question

你能提供一些关于新版本 FF 的信息吗，它是在版本 37.0.2 之后通过的。我知道 38 版本的大部分 bug 已经在 38.0.5 版本中修复了。我注意到在所有新版本的 FF 中属性 'animate' 和 'animateTransform' 的处理速度有所不同，因此页面变得非常慢。如果删除动画标签：

        <rect x="-1.32" y="-0.63" width="3.64" height="1.26" fill="#FFD9D9" stroke-width="0.0" rx="0.12">
            <!--this animation makes half-visible selecting effect -->
            <animate attributeType="CSS" attributeName="opacity" to="0.65" dur="0.5s" begin="mouseover" fill="freeze"></animate>
            <animate attributeType="CSS" attributeName="opacity" to="1" dur="0.5s" begin="mouseout" fill="freeze"></animate>
        </rect>

为此：

        <rect x="-1.32" y="-0.63" width="3.64" height="1.26" fill="#FFD9D9" stroke-width="0.0" rx="0.12">
            <!--no animation -->

        </rect>

然后我们失去动画（悬停）效果并且速度变得正常，就像在旧版本 FF(37.0.2) 中一样（没有删除）动画标签。

我创建了主题：https://bugzilla.mozilla.org/show_bug.cgi?id=1171966

添加了一些示例代码和视频。在页面上有大量元素的情况下会观察到缓慢的问题，但前提是每个元素都具有 'animate' 这样的属性。也许也像这样：

        <rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
            <!--it makes half-visible selecting effect -->
            <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"></set>
            <!-- explicitly reverse the opacity animation on mouseout -->
            <set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"></set>
        </rect>

就我而言，我使用标签制作悬停效果并在鼠标悬停时更改不透明度。不使用 css、html5、DOM

如果能找到类似的主题（Whosebug、bugzilla）或也遇到过此问题的人，那就太好了。谢谢

Answer 1

由于Chrome放弃了对SMIL的高级支持，Fire Fox会在一段时间内尝试修复这个bug（不是在vers 39，也许以后），使用这些工具是个好主意关闭 CSS 和网络动画

Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

Answer 2

此问题已在 Firefox 41 及更高版本中修复。

Firefox 38-40 SMIL 问题 - 速度非常慢（已在 2015 年 9 月 22 日的 FF 版本 41 中解决）

Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15)

firefox

svg

mozilla

smil

svg-animate