Firefox 浏览器中的 SVG 路径元素比例转换错误

Question

我试图通过在其上添加变换比例转换来为悬停时的 svg 路径元素设置动画。

它在 chrome 上完美地工作，但在 Firefox 上它打破了过渡。

注意：它在没有过渡动画的情况下工作，但在这个用例中需要过渡。

HTML：

<svg viewBox="-1.1 -1.1 2.2 2.2">
  <g>
    <path d="M 1 0 A 1 1 0 0 1 -0.8085734960732691 0.5883951915573843 L 0 0" fill="#ACC6D9" stroke="#ACC6D9" stroke-width="0.01"></path>
    <path d="M -0.8085734960732691 0.5883951915573843 A 1 1 0 0 1 -0.8100500340267164 -0.5863607612837983 L 0 0" fill="#93B5D1" stroke="#93B5D1" stroke-width="0"></path>
    <path d="M -0.8100500340267164 -0.5863607612837983 A 1 1 0 0 1 0.3063859980740773 -0.9519073590345604 L 0 0" fill="#81A8C9" stroke="#81A8C9" stroke-width="0"></path>
    <path d="M 0.3063859980740773 -0.9519073590345604 A 1 1 0 0 1 0.999992891049955 -0.0037706563822101314 L 0 0" fill="#6E9CC1" stroke="#6E9CC1" stroke-width="0"></path>
  </g>
  <circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>

CSS：

path{
  transition: transform 0.2s;
}
path:hover{  
  transform: scale(1.1);
}

JSFiddle 链接：https ://jsfiddle.net/tpkjf15b/2/

编辑：

Chrome 80（所需的输出）：GIF

Firefox 74（损坏）：GIF

Answer 1

这是一个奇怪的错误，显然是由分数笔划宽度引起的，如以下简化案例所示：

path {
  transform: scale(1, 1);  
  transition: transform 0.2s linear;
}
path:hover {  
  transform: scale(1.1, 1.1);
}
:checked ~ svg path {
  stroke-width: 0.1;
  stroke: red;
}

<input id="inp" type="checkbox"><label for="inp">add stroke</label><br>
<svg viewBox="-2.5 -2.5 10 10" width="300">
    <path d="M0 0 L2.5 0 L0 2.5 Z" fill="#ACC6D9"></path>
  <circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>

因此，对于您的情况，由于笔画设置为与填充相同的颜色，您可以通过以不需要笔划 hack 的方式重新定义形状来避免此错误。我猜你用它来避免抗锯齿伪影，但与其这样的黑客，你最好在可能的情况下使用整数坐标，或者简单地使用viewBox允许笔划宽度工作的坐标1。

另外，我没有检查这个错误是否已经被引用，但我仍然可以在 Nightly 76 上重现，所以你可能想在 Mozilla 的 bugzilla 上打开一个问题。