CSS转换导致SVG在Firefox中摆动

Question

我在应用程序中有一个播放按钮的SVG，我正在将CSS变换效果应用于悬停的效果。

这在Chrome中正常工作，但是在Firefox 54中，当动画删除:hover伪级时，内部多边形稍微摆动。

。

我尝试了以下答案：悬停(比例效应(无济于事时的图像摇摆。

我正在使用的SVG和CSS，请确保在Firefox中查看。这个问题非常微妙，似乎三角形的缩放重置到了另一个位置，然后过渡结束后，它回到了原始位置。

如何在Firefox中进行修复？

svg {
  min-width: 75px;
  width: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -moz-filter: blur(0px);
}
svg circle {
  transition: all 0.2s ease-in-out;
  transform-origin: 50% 50%;
  -moz-filter: blur(0px);
}
svg polygon {
  transition: all 0.2s ease-in-out;
  transform-origin: 50% 50%;
  -moz-filter: blur(0px);
}
span:hover .circle {
  fill: #000;
  fill-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}
span:hover .triangle {
  fill-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}

<span style='width:100%;'>
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 237 237'>
    <circle class='circle' fill='#666' fill-opacity='0.5' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='109.8' cy='109.8' r='103.3' stroke='#000' />
    <polygon class='triangle' fill='#fff' fill-opacity='0.5' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='76.5,62.5 153.5,105.8 76.5,154.1' stroke='#000'/>
  </svg>
</span>

Answer 1

我在Windows上使用FF 54.0，而没有看到任何" Wiggle"。

如果您有问题，可能是因为transform-origin: 50% 50%在Chrome和Firefox中的行为不同(Firefox是正确的(。

请参阅：Firefox中的SVG变换 - 原始问题