Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

how to specify rotation axis of <g>?

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?

Best Answer
2 REPLIES 2

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.

Best Answer
0 Votes

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).

Best Answer