Simple Sample Animations
In this section, I show you a few examples of the ways in which you can apply SVG animations.
Animating gradients
Take a look again at the linear gradient you saw early in Chapter 6, “Creating SVG Gradients,” and look at how you can animate it:
Listing 8.29. (AnimBasicLinGradient01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="500" height="300"> <defs> <linearGradient id="MyFirstGradient"> <stop offset="5%" style="stop-color:#FF6600"/> <stop offset="95%" style="stop-color:#FFFFCC"/> </linearGradient> </defs> <rect style="fill:none; stroke:red" x="1" y="1" width="498" height="298"/> <rect x="50" y="50" ... |
Get Designing SVG Web Graphics 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.
