Examples of rotating a line.
#1 (black line) rotates clockwise around a point at the top of the line.
#2 (green) rotates counter-clockwise around a similar point.
The blue line (#3) rotates clockwise around a point at the middle of the line. It rotates around itself.
The red line (#4) rotates counter-clockwise around a similar point at its midpoint.
The command to do this is animateTransform and we give it various arguments to control the object.
How to determine the coordinates of the point of rotation are explained in a previous page.
The argument that controls the direction of rotation is the same value in each case, only differing in whether it is positive or negative.
Line #3:
In the above code it is the line with 'from="0 120 100" to="360 120 100"'. The first argument of the to attribute is '360' (positive). This indicates the direction of rotation will be clockwise.
The 2nd and 3rd arguments (120 100) are the x and y coordinates of the point of rotation - where do you want the object to rotate around.
The 5th example (orange line) rotates around the x and y coordinates of the digit '5' (195,70). Since the first argument of the to attribute is negative (-360), the direction of rotation is counter-clockwise.
Example #6 (white line) is simply moved to the end of the line.
In the middle figure, we perform 2 motions simultaneously: rotate line (#7) around its top end, and move it linearly.
We use the g command to group objects and commands together. When we perform several operations on an object, it is important to place the command in the proper order, and proper place. Here, we first perform the rotation, then perform the linear move / translation.
In the bottom figure, we again perform 2 operations on an object. This time a radius in a circle is rotated about the center of the circle, while the whole object moves linearly.