Building Web Applications with SVG - Cdn.oreilly.com

example 6: Animated text Crawling Along a Bézier Curve
To anyone who enjoyed the excitement of new applications being unveiled in the Macintosh environment
of the mid-to-late 1980s, Adobe Illustrator’s ability to allow the layout of text to follow an
arbitrary curve, using a simple graphical user interface (GUI), fell in the category of “utterly cool.” The
example at http://srufaculty.sru.edu/david.dailey/svg/newstuff/textpath1.svg demonstrates that SVG
can do this—and go one step further: it can animate the text moving along that curve!
Here’s how it’s done:
■■ Laying text along a path While this will be discussed with examples later in the book, it
works rather like this: First, running text (a sequence of characters) is placed in an SVG
element. Also in the goes a element that has a simple URI reference to the
ID of the element.
■■ Animation of text following a path One attribute of is startOffset. Its value
determines an offset for the initial position of the text. That is, a value of zero means that the
text will begin at the start of the path; higher values mean that the text will begin closer to the
endpoint. The effect is accomplished by simply animating that value with an SVG
element.
Example 7: Animated Reflected Gradients with Transparency
Some of the effects offered by SVG seem to be more interesting than useful. This is often true of
things like pure mathematics, until one’s imagination discovers (or invents) their utility. The radial gradients
available in SVG have the ability to repeat bands of color, using the values of reflect or repeat.
When seen in motion at http://srufaculty.sru.edu/david.dailey/svg/newstuff/gradient11c.svg, this
example is quite impressive. It’s best rendered by Chrome and ASV.
CHAPTER 1 SVG Basics 13