Animating an Object's Location

The animate element allows for the transition of an object between one state and another. One application of this element would be moving an object from one point to another. The animate element would smoothly move the object from the first point to the second point in a straight line.

To demonstrate this, copy the code of the previous example (Listing 15.2) and paste it into a new document. Alter the animate element to modify the x attribute (line 32 in Listing 15.3) of Cloud1, the leftmost cloud (line 31). Have the cloud move from its original x location (−20) to a place off to the right of the sky rectangle (something like 200). This can be done by altering the from and to values according to these two new positions ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.