悬停时SVG动画从Firefox中的错误位置开始

当您将鼠标悬停在Chrome中的元素上时，时钟的底部开始向下移动。如果您尝试在Firefox中执行此操作，它将从错误的位置开始。悬停时SVG动画从Firefox中的错误位置开始

HTML

<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>

CSS：

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

https://jsfiddle.net/kd7x068g/

来源

2017-07-15 Stas Stativa

不知道FF有多少是在这里，也没有事情会如何与即将到来的SVG2标准改变，但事实上，这似乎FF不允许CSS从转变'transform'属性为其等效的CSS。一个简单的解决方法是在任何地方使用css：https://jsfiddle.net/kd7x068g/1/ – Kaiido

不，但它仍然应用非CSS转换。 –

看来你可能已经达成在Firefox中的错误。

这是你的SVG的简化版本：

#clock_bottom_3 {transition: transform 0.3s;} 
 

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

<svg width="588px" height="512px" viewBox="0 0 588 512"> 
 
    <g id="clock_bottom_3" transform="translate(72 306)"> 
 
     <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse> 
 
    </g> 
 
</svg>

你要在两个translate()之间转换转换悬停。这适用于Chrome，但不适用于Firefox。看起来好像Firefox忽略了对象的初始转换，而是从（0,0）转换。

现在的修复方法是将“clock_bottom_3”包装在另一个组中，并将转换应用于该组。

#clock_bottom_3_wrap {transition: transform 0.3s;} 
 

 
svg:hover #clock_bottom_3_wrap {transform: translate(0px, 14px);}

<svg width="588px" height="512px" viewBox="0 0 588 512"> 
 
    <g id="clock_bottom_3_wrap"> 
 
     <g id="clock_bottom_3" transform="translate(72 306)"> 
 
      <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse> 
 
     </g> 
 
    </g> 
 
</svg>

If we make that modification to your original fiddle, it works.

来源

2017-07-15 07:03:28

已经完成:) https://bugzilla.mozilla.org/show_bug.cgi?id=1381201 –

悬停时SVG动画从Firefox中的错误位置开始

回答

相关问题