Summary

---

 Download CD Content

Overview

The aim of this chapter is to familiarize you with the SVG DOM and the ECMAScript features that are necessary for manipulating SVG elements. As such, the first part of this chapter (which is fairly short) provides examples of embedding SVG code in HTML pages. The second part of this chapter (also fairly short) introduces you to ECMAScript functions and provides you with the necessary techniques for processing mouse events in SVG. For example, you'll see how simple it is to associate a graphics image with a hyperlink that navigates to the specified URL after clicking inside that image with your mouse.

The third part of the chapter introduces you to SVG DOM and provides examples of deleting, adding, and updating SVG elements via ECMAScript functions. The code examples in this section delve into more detail vis-à-vis ECMAScript functions. Since the SVG Document Object Model (DOM) hierarchy is accessible through ECMAScript, you can modify individual attributes of an SVG element. For example, you can detect a mouse click over an ellipse and then (based on some logic of your choice) determine whether to increase or decrease the values of the attributes cx, cy, rx, and ry that are associated with that ellipse. If you label all the elements in your SVG code with an id attribute, it is a straightforward process to check for the presence of multiple SVG elements, regardless of whether or not you clicked on them with your mouse. Moreover, you'll see how easy it is to dynamically create new SVG elements and delete existing elements. Once you gain access to the SVG elements, you will have the freedom to create a remarkable panoply of visual effects with SVG. All code and images for this chapter can be found on the companion CD-ROM in the Chapter 11 folder.

---