Summary

---

 Download CD Content

Overview

This chapter demonstrates how to define and use ECMAScript functions in order to create SVG animation effects. In previous chapters you've seen how to create SVG animation effects based on the SVG elements animate, animateColor, and animateTransform, which provide an indirect mechanism for modifying the values of the attributes associated with SVG elements (e.g., width, height, x, and y attributes of a rectangle). However, these animation-related SVG elements do not provide direct access to the points inside an SVG path element. Since the SVG path element is used for defining Bezier curves and other sophisticated graphics images, you cannot easily modify the definitions of such images by the aforementioned set of SVG animation-based elements.

Fortunately, the SVG DOM provides you with a mechanism for directly accessing and modifying attributes such as the path attribute of an SVG element. These modifications are performed in ECMAScript functions, where you can also invoke a plethora of mathematical functions as well as trigonometric functions (among others) in order to create sophisticated animation effects that are not directly available in SVG. The techniques presented in this chapter can also be used to render polynomials, rational functions, and polar equations. Keep in mind that ECMAScript functions can easily become very lengthy when they perform many computations that involve mathematical functions or trigonometric functions. Consequently, the SVG examples in this chapter are longer than those in previous chapters.

By necessity, this chapter requires an understanding of ECMAScript functions, mathematical functions, and trigonometry. Now would be a good time (if you haven't done so already) to review the relevant material in the associated appendices in this book.

The SVG examples in this chapter have a very similar style: a large block of global variables is declared at the top of the code, followed by a set of ECMAScript functions. Initially you might find yourself progressing rather slowly through the code. This is understandable because you need to familiarize yourself with the ECMAScript variable names and the overall flow of logic. Since the style of the examples is consistent, each example serves to further reinforce your understanding of the overall form as well as purpose of the SVG code. By the end of this chapter, you'll not only become comfortable with the code, you'll also be able to understand the supplemental examples more quickly and more easily. In addition, most (if not all) of the techniques presented in this chapter can easily be adapted for rendering mathematical functions such as polynomials and rational functions. All code and images for this chapter can be found on the companion CD-ROM in the Chapter 13 folder.

---