Firefox 搞砸了 SVG Use/Defs

Question

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

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

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

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

我是不是做错了什么？这是 Firefox 中的错误吗？我能以某种方式修复它吗？

谢谢

Answer 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>

Answer 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>

Firefox 搞砸了 SVG Use/Defs

Firefox messes up SVG Use/Defs

firefox

svg

google-chrome

svg.js