svg render issue position offset error when using <use> at small scale
Categories
(Core :: SVG, defect)
Tracking
()
People
(Reporter: hanstolpo+firefox_bugzilla, Unassigned)
Details
Attachments
(2 files)
Chrome rendering on left FireFox rendering on the right showing the offset error, above the minimal example below an example in the wild
There is a position offset error when placing elements using <use>
- the error is visible when working at a small scale of units
- the error is not present in Chrome nor InkSkape
- the error is inversely proportional to the scale that you are working at
- the error is not present if you remove the positioning from
<use>and instead place it by wrapping the<use>node in a<g>node and usingtransformattribute to do the positioning.
I have been aware of the issue since 2016, so it is not new, but only recently tried to make a minimal example.
Here is a minimal HTML example which shows the error clearly, it positions an element using <use> and another element that should overlap it completely positioned using a transform attribute, this is shown at different unit scales of working, and you can clearly see that they do not overlap correctly.
<html>
<body>
<div>
At e-4
</div>
<svg
width="100%"
height="30%"
viewbox="-0.02e-4 -0.02e-4 1400e-4 1400e-4"
>
<defs>
<rect x="0" y="0" width="150e-4" height="150e-4" id="rect" fill="red" stroke="none"/>
</defs>
<g transform="translate(0,1000e-4) scale(1,-1)">
<use x="760e-4" y="560e-4" xlink:href="#rect"/>
<g transform="translate(760e-4, 560e-4)">
<rect x="0" y="0" width="150e-4" height="150e-4" fill="blue" stroke="none"/>
</g>
</g>
</svg>
<div>
At e-3
</div>
<svg
width="100%"
height="30%"
viewbox="-0.02e-3 -0.02e-3 1400e-3 1400e-3"
>
<defs>
<rect x="0" y="0" width="150e-3" height="150e-3" id="rect-2" fill="orange" stroke="none"/>
</defs>
<g transform="translate(0,1000e-3) scale(1,-1)">
<use x="760e-3" y="560e-3" xlink:href="#rect-2"/>
<g transform="translate(760e-3, 560e-3)">
<rect x="0" y="0" width="150e-3" height="150e-3" fill="green" stroke="none"/>
</g>
</g>
</svg>
<div>
At e-2
</div>
<svg
width="100%"
height="30%"
viewbox="-0.02e-2 -0.02e-2 1400e-2 1400e-2"
>
<defs>
<rect x="0" y="0" width="150e-2" height="150e-2" id="rect-3" fill="purple" stroke="none"/>
</defs>
<g transform="translate(0,1000e-2) scale(1,-1)">
<use x="760e-2" y="560e-2" xlink:href="#rect-3"/>
<g transform="translate(760e-2, 560e-2)">
<rect x="0" y="0" width="150e-2" height="150e-2" fill="yellow" stroke="none"/>
</g>
</g>
</svg>
</body>
</html>
I have also attached an image showing the rendering in Chrome and FireFox. It combines two images, the above one showing the rendering of the minimal example and the below one a rendering in the wild, in both cases left is Chrome and right is FireFox.
|
||
Updated•7 years ago
|
|
||
Comment 2•7 years ago
|
||
I'm afraid the answer is to use bigger units
I am okay with you closing it, I did my civic duty by reporting it, but the point remains there is a defect in the rendering code, this defect is not present in other SVG viewers, nor is it present when not using <use> tag to position something. There is a bug in the way <use> positions something which differs from the way it is positioned using transform.
|
|
||
Comment 4•7 years ago
•
|
||
Sure, that's why it's wontfix rather than invalid. We can't always fix everything and it's better to be upfront than just leave you hanging isn't it?
Description
•