CSS 转换导致 SVG 在 Firefox 中摆动

Posted 2023-03-06

【中文标题】CSS 转换导致 SVG 在 Firefox 中摆动

【英文标题】：CSS Transformation causes SVG to wiggle in Firefox

【发布时间】：2017-11-28 19:36:58

【问题描述】：

我的应用程序中有一个播放按钮的 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>

【参考方案1】：

我在 Windows 上使用 FF 54.0，但没有看到任何“摆动”。

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

见：svg transform-origin problems in firefox

【讨论】：

规格已更改。现在nobody's right :(

哈哈。我没听说过。 ://

w3c 一直等到我们尝试发送 transform-b​​ox 然后立即让我们崩溃。在我们花了数年等待他们修复规范之后，所以当我们发布时，我们会发布兼容的东西。 叹息

@PaulLeBeau 我的问题是我最终可能不知道按钮有多大，因为我将允许我的用户自己设置大小，因此是 50%。

@RobertLongson 这是否意味着该解决方案无论如何都行不通？