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

SVG Transform Rotation

ANSWERED

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>

 

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

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.

View best answer in original post

Best Answer
0 Votes
3 REPLIES 3

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/

Peter McLennan
Gondwana Software
Best Answer
0 Votes

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.

Best Answer
0 Votes

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.

Best Answer
0 Votes