Building Web Applications with SVG - Cdn.oreilly.com
Building Web Applications with SVG - Cdn.oreilly.com
Building Web Applications with SVG - Cdn.oreilly.com
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
example 3: Simple Animation (Just 38 Lines of Markup<br />
and No Script)<br />
This example, visible at http://srufaculty.sru.edu/david.dailey/svg/ovaling.svg, has been cited by others<br />
for the richness it achieves even <strong>with</strong> such simplicity. The example uses SMIL animation to simultaneously<br />
vary 4 different attributes of 26 different objects. At the <strong>SVG</strong> Open 2010 conference in Paris,<br />
one of Microsoft’s demonstrations showed that this particular example could be animated using one<br />
of several SMIL emulators for <strong>SVG</strong>, although as of this writing, most browsers can run the animation<br />
<strong>with</strong>out additional assistance. Creating such a rich animation <strong>with</strong> other technologies, such as the<br />
HTML5 tag or Java Applets, would take much more code, thought, experimentation, and<br />
time to develop.<br />
Here’s how it’s done:<br />
■■ Drawing one petal of the flower An ellipse is drawn <strong>with</strong> a given centroid and differing<br />
radii in the x and y directions. It is made slightly more transparent than opaque (the opacity<br />
is set to 0.4). It is then filled <strong>with</strong> a gradient (in this case, a linear gradient moving from red to<br />
blue and then through green to yellow).<br />
■<br />
■ Replicating the petal <strong>SVG</strong> allows considerable reuse of code. In this case, the initial petal is<br />
reused four times through a series of elements, each of which applies a different rotation<br />
to the petal. This creates a petal cluster, which itself is then grouped and reused 5 more<br />
times, for a total of 25 petals being drawn <strong>with</strong> only 9 lines of markup.<br />
CHAPTER 1 <strong>SVG</strong> Basics 9