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>

您正在悬停时在两个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.

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

1 个答案: