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