Firefox 浏览器中的 SVG 路径元素缩放转换错误

Posted 2023-03-06

【中文标题】Firefox 浏览器中的 SVG 路径元素缩放转换错误

【英文标题】：SVG path element scale transition bug in Firefox browser

【发布时间】：2020-06-18 03:13:58

【问题描述】：

我正在尝试通过在其上添加变换比例过渡来在悬停时为 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-></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-></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-></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-></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

【问题讨论】：

我看不出有什么区别，developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/74 在 SVG 下也显示“没有变化”

【参考方案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" >
    <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>

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

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

【讨论】：

改用本文生成“d”属性的方式：josephkhan.me/creating-a-svg-pie-chart-html5感谢指出问题

【参考方案2】：

您需要在hover 和with hover 之前在path 上写css transform: translate3d(0px,0px,1px) scale(1); 属性，with hover 需要写类似transform: translate3d(0px,0px,1px) scale(1.1); 最后transform: translateZ(1px);让它在FF中完美运行。 也可以：transform: translate3d(0px,0px,1px);

希望对你有帮助。

path
  transform: translate3d(0px,0px,1px) scale(1);
  transition: transform 0.2s;

path:hover  
  transform: translate3d(0px,0px,1px) scale(1.1);

<svg viewBox="-1.1 -1.1 2.2 2.2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="backface-visibility: hidden;">
  <g>
    <path d="M 1 0 A 1 1 0 0 1 -0.8085734960732691 0.5883951915573843 L 0 0" fill="#ACC6D9" stroke="#ACC6D9" stroke-></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-></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-></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-></path>
  </g>
  <circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>