SVG Transform Rotation

[rohank.ce]

I'm trying to rotate a circle from a point 127, 127 on the watch however, whenever i rotate the circle, it becomes elongated or stretched and disappears. How should I implement this properly? I've attached the section of code that I have at the moment. Thanks!

// rotation point
<circle cx="127" cy="127" r="10" fill="white" />
<g transform="rotate(45, 127, 127)">
  <circle cx="127" cy="23" r="10.5" fill="white" />
</g>

[Gondwana]

I'd say your rotate() args are implying a rotation involving multiple axes. I think you should give it one arg or four, by analogy with https://dev.fitbit.com/build/guides/user-interface/animations/

[rohank.ce]

According to the docs even if you leave the arguments blank they would auto set to 0. I tried it again with 4 arguments and it still didn't work. When I do it with one argument, the rotation works fine around the origin (0,0) however, I continue to run into errors when I shift the point of rotation.

[rohank.ce · Accepted solution]

For anyone wondering how to do this, I did some experimenting, and it turns out the coordinate of g is the point of rotation, so you need to use translate on g to move that to your rotation point, and then use rotate for your object. You don't have to supply any of the additional arguments, just the angle and translate the coordinates.