Chapter 12: Interactive SVG and ECMAScript

---

SVG Code Template for This Chapter

If you are relatively new to ECMAScript, it might be helpful to look at a high-level overview of the structure of the code samples in this chapter. All the SVG documents in this chapter have an ECMAScript function that is executed whenever a particular mouse event occurs that is associated with an SVG element (which makes it 'mouse aware'). Structurally all the examples have a format that is similar to the one listed below, where the ellipsis ('...') indicates that some information has been omitted:

<?xml version="1.0" standalone="no"?> <!DOCTYPE ....> <svg ....>   <script type="text/ecmascript">     <![CDATA[     // global variables here     function doSomething(event)     {        // some code goes here     }   ]]> </script> <g transform="translate(10,10)">  <!-- 'rect' is an example (not mandatory) -->   <rect onclick="doSomething(evt)" .../>  </g> </svg>

The key idea in the preceding template involves 'associating' the ECMAScript function doSomething() with an SVG rect element, and this function is invoked when you click your mouse inside the rectangle. The exact nature of what happens inside this function depends on the code that you include in this function. You can specify other ECMAScript functions that are executed when you click on different SVG elements. For example, the following code fragment associates an ECMAScript function with an SVG polygon element and a different function with an SVG rect element:

<g transform="translate(10,10)">   <polygon onclick="doSomething1(evt)" .../>   <rect    onclick="doSomething2(evt)" .../> </g> 

In the preceding fragment, the ECMAScript function doSomething1() will be invoked when you click inside the polygon and the ECMAScript function doSomething2() will be invoked when you click inside the rectangle.

You can also specify the same ECMAScript function for multiple SVG elements; in this scenario, you'll obviously need some mechanism for determining the specific SVG element that is associated with the mouse click event. Until you become highly proficient in ECMAScript functions, though, it's probably easier to invoke different functions for different SVG elements.

SVG can handle much more than just mouse click events; if you read Chapter 18 (section 4) of the SVG specification, you will find the following mouse-related events:

• onmousedown

• onmouseup

• onmouseover

• onmousemove

• onmouseout

Note that the onclick mouse event consists of an onmousedown event followed by an onmouseup event. The onmouseover mouse event is useful for detecting the fact that your mouse is inside the region defined by an SVG element contained in your SVG document, and this event can trigger the execution of an ECMAScript function that will perform the appropriate actions. The onmouseout mouse event can trigger the execution of an ECMAScript function when your mouse exits the region that belongs to one of your SVG elements. This chapter will focus on presenting various situations where you want to process a 'mouse click' event. Now let's examine some complete examples in order to understand how to manipulate the contents of an SVG document.

---