CSS 转换导致 SVG 在 Firefox 中摆动

Question

我的应用程序中有一个播放按钮的 SVG，我在悬停时对其应用 CSS 变换效果，并按小幅放大。

这在 Chrome 中运行良好，但在 Firefox 54 中，当动画在删除 :hover 伪类后重置时，内部多边形会轻微摆动。

我尝试了Images wiggles when hover (scale effect)的答案，但无济于事。

我正在使用的 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，但没有看到任何“摆动”。

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

见：svg transform-origin problems in firefox