ホバー上のSVGアニメーションがFirefoxの間違った位置から始まる

Question

Chromeの要素にマウスを置くと、時計の下部が下がり始めます。 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/

Answer 1

あなたは、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>

はあなたがホバー上の2つの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.