I am trying to create an SVG which reuses defined symbol. However, I have run into several problems trying to get the defined symbol to scale in the same way on Safari and Chrome/Firefox.
My current issue occurs when the viewBox of the symbol is different to the viewBox of the SVG in which the symbol is used. In this case, Chrome appears to scale about a 0,0 point, whereas Safari seems to scale from some other point; I'm not quite sure where this scaling point is, but I don't think it's the center of the SVG.
I have simplified the problem to a basic example (https://codepen.io/l3point/pen/gOvRgaW):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">
<symbol id="s" width="1000" height="1000" viewBox="0 0 1000 1000">
<rect height="1000" width="1000" fill="green" />
</symbol>
<rect height="1000" width="2000" fill="blue" />
<rect height="1000" width="1000" fill="red" />
<use href="#s" x="0" y="0" transform="scale(0.5)" />
<use href="#s" x="1000" y="1000" transform="scale(0.5)" />
</svg>This display like this on Chrome:
Image of SVG displayed on Chrome
The SVG displays like this on Safari:
Image of SVG display on Safari
I am sure I am misunderstanding something simple. I would be grateful for any help.