SVG - should the symbol element be transformed?

[veleveta]

Could you please help me to find the answer, how the svg file should look like?
 

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <symbol id="myDot" viewBox="0 0 6 6" overflow="visible" transform="matrix(2 0 0 1 -6 5)">
        <circle cx="1" cy="2" r="3"/>
  </symbol>
  <use href="#myDot" x="0" y="0" style="opacity:0.8" />
</svg>

 

it looks differently in firefox and chrome. 

I disabled clipping by setting 'overflow="visible"'.

In one case the transformation matrix is applied to she shape, and in the other one it is not. I can not find in specs which one is correct. 

Maybe someone knows?

Edited February 25, 2022 by veleveta

[Ingolme]

The picture above is correct. For the browser to render it correctly, the circle must be twice as wide as it is tall.

The matrix scales X coordinates by 2 and then moves them towards the left by 6 units. For Y coordinates, it scales by 1 (keeps them the same size) and shifts them down by 5 units.

Scaling is done from the top left corner of the document, which is why the circle moves towards the right when scaled up.

[veleveta]

Thx for the answer. I understand how the transformation works. My question is, whether it should be applied to both: to the clip (setting viewbox is like clipping the picture) and to the shapes or only to the clip (as it is in chrome).