懸停時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中的錯誤位置開始

回答

相關問題