05-27-2018 08:05 - edited 05-27-2018 08:06
05-27-2018 08:05 - edited 05-27-2018 08:06
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>
Answered! Go to the Best Answer.
05-28-2018 19:21
05-28-2018 19:21
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.
05-27-2018 13:28
05-27-2018 13:28
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/
05-27-2018 19:59 - edited 05-27-2018 20:00
05-27-2018 19:59 - edited 05-27-2018 20:00
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.
05-28-2018 19:21
05-28-2018 19:21
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.