10-06-2017 19:15
10-06-2017 19:15
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?
10-07-2017 12:43
10-07-2017 12:43
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.
10-08-2017 22:05 - edited 10-08-2017 22:05
10-08-2017 22:05 - edited 10-08-2017 22:05
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).