Animation 悬停时的SVG动画在firefox中从错误的位置开始

当您将鼠标悬停在Chrome中的元素上时，时钟的底部开始向下移动。如果你试图在firefox中这样做，它从错误的位置开始

HTML

---

看来您可能在Firefox中发现了一个bug

以下是SVG的简化版本：

#时钟_底部_3{转换：转换0.3s；}
svg:hover#clock bottom 3{transform:translate（72px，320px）}

不确定这里有多少FF，也不知道随着即将推出的svg2标准，情况会发生什么变化，但事实上，FF似乎不允许CSS从

transform

属性转换为其CSS等价物。一个简单的解决方法是在任何地方使用css：不，但它仍应应用非css转换。

<g id="clock_bottom_3" opacity="0.316786674" transform="translate(72.000000, 306.000000)">
                    <ellipse id="Oval" fill="url(#radialGradient-1)" opacity="0.24" transform="translate(87.000000, 52.000000) rotate(-180.000000) translate(-87.000000, -52.000000) " cx="87" cy="52" rx="87" ry="52"></ellipse>
                    <ellipse id="Oval" fill="url(#radialGradient-2)" opacity="0.24" transform="translate(117.000000, 52.000000) scale(-1, 1) rotate(-180.000000) translate(-117.000000, -52.000000) " cx="117" cy="52" rx="87" ry="52"></ellipse>
                </g>

#clock_bottom_3 {transition: transform 0.3s;}
svg:hover #clock_bottom_3 {transform: translate(72px, 320px);}