how to specify rotation axis of <g>?

[EmTe]

I take it that only <g> supports rotation. How do I specify the location of the rotation axis? Does it only support rotation at one point at 0, 0 or 50%, 50%?

How do I group child lines together so they rotate as a whole and not rotate separately?

[JonFitbit]

You can see here how translate is used to change the axis

https://dev.fitbit.com/guides/user-interface/animations/#rotation-animation

Everything inside the <g> should stay together, maybe you need to nest a few groups.

[EmTe]

Thanks but I don't really understand the example on that page. Here's an excerpt from that page:

---

We're using the transform translate to position the g element within the 
centre of the screen. In order to rotate around the centre point of the 
rectangle, we need to position our rect element within the centre of 
the g element.

<g x="50%" y="50%" transform="translate(50%,50%)">
  <rect x="$-50" y="$-50" width="100" height="100" fill="red" />
</g>

---

1) If we are already using "translate" on the <g> then why do we need to set the "x" and "y"? If the x|y are set and translate is used too, then won't the result be 50+50=100% horizontally?

2) I don't understand this sentence "In order to rotate around the centre point of the rectangle, we need to position our rect element within the centre of the g element."

Does it mean that all <g> elements transform it's children with rotation axis at the center, relative to the screen, or relative to the <g> element? If relative to the <g> element, then well, the <g> element has offset 50%,50% and without a known height/width of the <g> element, then the center of the <g> is unknown.

If it is relative to the screen, then translating the <g> should have no effect on it's children since it's children will rotate relative to the screen anyway, and the <g> doesn't introduce another coordinate system for it's children (elsewhere it says only <svg> introduces a new coordinate system).