Share this Page URL
Help

Chapter 16. Animating SVG with Scripting > HTML and SVG Interaction - Pg. 480

480 Chapter 16. Animating SVG with Scripting IN THIS CHAPTER · HTML and SVG Interaction · Animating with ECMAScript In Chapter 15, "Scripting SVG," you saw how to modify SVG--from within SVG (or embedded script code). This chapter features techniques to access HTML data from within SVG and vice versa. We will also look at ways to animate SVG using client-side ECMAScript/JavaScript. HTML and SVG Interaction If you know JavaScript, you probably know how to change HTML content--from within HTML (or embedded script code). In this chapter, we go over the border and access HTML data from within SVG and vice versa. From SVG to HTML In JavaScript terms, the most important objects for accessing HTML data are the following two: · The document object represents the HTML document, including all elements within the docu- ment (yes, newer browsers such as Internet Explorer 5 and higher and Netscape 6 support DOM2). · The window object represents the top window, including access to window functions such as setTimeout() and setInterval() to enable SVG animations from JavaScript, as you will see in the next section. From within SVG, you can access any of these objects directly from within an SVG file. Setting Timeouts For our trip from SVG to HTML, let's start with the window object. This object has many useful methods, including the four methods described in Table 16.1. Table 16.1. window Object Methods Method setTimeout(code, interval) clearTimeout(id) setInterval(code, interval) clearInterval(id) Description Runs code (a string variable) after interval (in milliseconds). Returns a numeric identifier for the timeout. Clears the timeout with the given id; that is, the code is not executed. Runs code (a string variable) every interval milliseconds. Returns a numeric identifier for the timeout. Clears the interval with the given id; that is, the code is not executed again. SVG brings its own Window interface (yes, within SVG, it is capitalized), but you can work with the ECMAScript/JavaScript window object as well. Both offer the same capabilities.