CODEWITHSUNDEEP
google-chromefirefoxsvgsvg.js
Simiil
Simiil

Reputation: 2311

Firefox messes up SVG Use/Defs

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

Upvotes: 1

Views: 125

Answers (2)

Robert Longson
Robert Longson

Reputation: 124249

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>

Upvotes: 1

Dimitrios Douras
Dimitrios Douras

Reputation: 506

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>

Upvotes: 0

Related Questions