Skip to Main Content
SVG for Web Developers
book

SVG for Web Developers

by Ellen Pearlman, Lorien House
December 2002
Beginner to intermediate content levelBeginner to intermediate
464 pages
8h 34m
English
Pearson
Content preview from SVG for Web Developers

Timing an Animation

It is said that timing is everything, but so far, all of the animations we've seen have had simple timing and have used only the begin and dur attributes to control timing. SVG has other timing attributes that are common to all animation elements. In this section, we'll take a look at some interesting things you can do with them.

SVG measures time in a variety of ways, according to what is specified. So far, values such as 6s (6 seconds) have been used to set time values. This is one way of calculating time, called timecount values. Timecount values use abbreviations to set time so that:

  • 4.3h = 4.3 hours

  • 30min = 30 minutes

  • 6s = 6 seconds

  • 4ms = 4 milliseconds

Theoretically, to make an animation last 2 hours, set it to 2h.

SVG ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Building Web Applications with SVG

Building Web Applications with SVG

Jon Frost David Dailey and Domenico Strazzullo
SVG Text Layout

SVG Text Layout

Amelia Bellamy-Royds, Kurt Cagle
Using SVG with CSS3 and HTML5

Using SVG with CSS3 and HTML5

Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey

Publisher Resources

ISBN: 0131004999Purchase book