Moving (animating) an object in a straight line requires the animate command. To begin, we add 'borders' around our viewbox by 'drawing' the path of each line.
Here is the code to produce the top (orange) line:
This is duplicated 3 more times, changing the color, x & y coordinates, as well as the timing.
In Example 1 we are moving the small red circle horizontally, from the middle to the right border.
The animate element must be contained within the definition of the circle:
attributeName refers to what attribute we wish to act on: cx being the x coordinate of the center of the circle.
attributeType can be XML or CSS, depending on the type of property we are acting on. In this case cx is an 'XML' attribute. Leaving this empty (as we did above), will still work, with a default value of auto. This causes a search through CSS properties, then XML properties.
Next in Example 2 we move a blue circle vertically from the middle to the bottom border.
Example 3 moves the green circle horizontally, but to the left this time. Note the 'to' coordinate is less than the 'from' coordinate.
In Example 4, we animate both the horizontal and vertical coordinates simultaneously, thus resulting in an angular animation, but still in a straight line.
Finally we come full circle (pun definitely intended) with Example 5. The purple circle rotates around a 60px circle centered at (250,250) - the larger black circle is not required, but only visible as a guide.
We wrapped our circles in separate group tags and gave them separate ids. This is so we can direct animation commands to the right object.
Note that we used a different command for the animation: animateTransform, and directed it to the proper object: "xlink:href="#circleIn".
The purple circle (circleIn) is separate from the larger circle (circleOut), and we are rotating the small (purple) one, not the large one. However, the larger black circle does not even need to be visible - it is only there as an instructional guide, so we slowly fade it away part-way through the animation by setting the opacity attribute to "0.0".
During this whole presentation, we notice a black line below Example 5 that is slowly disappearing.
This is done using a CSS trick found here.
Some additional style rules are needed: