Firefox messes up SVG Use/Defs

Question

I have a simple SVG that sets a viewbox and draws a rectangle. it also defines that same rectangle in <defs> and uses it on the same position as the first.

My expectation was that both rectangles should be overlapping exactly. Chrome does that as expected, but Firefox offsets the referenced rectangle by some amount.

Here is a jsfiddle describing the problem: https://jsfiddle.net/ycrehoz0/

I first observed this problem using the svg.js library, but it seems to be unrelated

Am i doing something wrong? is this a bug in firefox? can i fix it somehow?

Thanks

Answer 1

Use bigger numbers.

<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

This is really strange behaviour. As a workaround can you try use the same def twice like:

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