Firefox 搞砸了 SVG 使用/定义答案

【问题标题】：Firefox messes up SVG Use/DefsFirefox 搞砸了 SVG 使用/定义
【发布时间】：2020-01-03 18:43:49
【问题描述】：

我有一个简单的 SVG，它设置了一个视图框并绘制了一个矩形。它还在<defs> 中定义了相同的矩形，并在与第一个相同的位置使用它。

我的期望是两个矩形应该完全重叠。 Chrome 按预期执行此操作，但 Firefox 将引用的矩形偏移了一些量。

这是一个描述问题的 jsfiddle：https://jsfiddle.net/ycrehoz0/

我首先使用 svg.js 库观察到这个问题，但它似乎无关

我做错了吗？这是Firefox中的错误吗？我能以某种方式解决它吗？

谢谢

【问题讨论】：

我有一个简单的 SVG 所以它应该适合这个问题吗？

标签： google-chrome firefox svg svg.js

【解决方案1】：

使用更大的数字。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" style="min-width: 100%; min-height: 100%;" viewBox="-177.315 -136.614 500 600">
<g transform="matrix(1,0,0,-1,0,0)">
<rect width="20.472" height="20.472" x="127.559" y="-133.464" fill="#0f0" opacity="1"></rect>
<use xlink:href="#SvgjsRect1011" x="127.55899973034859" y="-133.46400026965142" fill="#f00" stroke="none" stroke-width="0"></use>

</g>

<defs>
  <rect width="020.472" height="020.472" stroke="none" stroke-width="0" id="SvgjsRect1011"></rect>
</defs>
</svg>

【讨论】：

【解决方案2】：

这真是奇怪的行为。作为一种解决方法，您可以尝试使用相同的 def 两次，例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" style="min-width: 100%; min-height: 100%;" viewBox="-1.77315 -1.36614 5 6">
<g transform="matrix(1,0,0,-1,0,0)">
<use xlink:href="#SvgjsRect1011" x="1.2755899973034859" y="-1.3346400026965142" fill="#0f0" stroke="none" stroke-width="0"></use>
<use xlink:href="#SvgjsRect1011" x="1.2755899973034859" y="-1.3346400026965142" fill="#f00" stroke="none" stroke-width="0"></use>

</g>

<defs>
  <rect width="0.20472" height="0.20472" stroke="none" stroke-width="0" id="SvgjsRect1011"></rect>
</defs>
</svg>

【讨论】：