Placing compound SVG items around coordinate (0,0)

[Janis Papanagnou]

I'm trying to construct a graphical symmetrically composed element -
say, a compass rose - with <svg> tags in a HTML source context.
My intention was - to simplify the transformations - to center the
element around coordinate (0,0). But I have problems even with a
simple composed graphical element. I had composed a simple element
placed in one quadrant of the coordinate system with some center
point (x,y) (where x, y unequal 0) like this:

+------
| / \
| \ /

but if (for example) I scale that then the _center_ of the composed
item gets relocated, but I want it persist. (SVG code below.[*])

So I tried to compose the element around (0,0) as illustrated here:

/|\
---+---
\|/

so that scaling and other point-symmetric derivations can be defined
easily without disturbing that symmetry.

I've looked for tutorials on the Web but the spare information I
found was more confusing than helpful to me. - Is there maybe any
good source you can recommend? Or maybe some small HTML/SVG code
sample how to center compound graphical items around (0,0)?

Janis


[*] Myself I was stuck with using fixed (not (0,0)-centered)
coordinates like

<svg id="def" xmlns="http://www.w3.org/2000/svg" version="1.1"
width="600" height="400" viewBox="-200 -100 600 400"
xlink="http://www.w3.org/1999/xlink"
style="position: relative; overflow: hidden;
left: 0px; top: 0px; display: block;">
<svg>
<g id="str" transform="scale(0.2)">
<circle cx="100" cy="100" r="100"/>
<polygon points=" ... "/>
</g>
...

[Janis Papanagnou]

On 18.11.2023 08:53, Janis Papanagnou wrote:
> [...]

Solved it. - The problem, e.g. that parts of the SVG had got cropped,
vanished after relocating the viewBox definition from the outer <svg>
to the inner. (Then the change of cx/cy to 0/0 was effective without
any visible cropping.)