Mouse Clicks and Gradient Colors

---

Determining Attribute Values of SVG Elements

Consider the rectangle rendered in Figure 11.7.

Figure 11.7: Displaying attribute values of SVG elements.

The SVG document in Listing 11.9 demonstrates how to use the SVG onclick element in order to invoke an ECMAScript function that displays the values of the attributes of an SVG rect element.

Listing 11.9 elementAttributes1.svg

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink">   <!-- *** JavaScript code starts here *** -->   <script type="text/ecmascript">   <![CDATA[     // Remove rectangle and add circle     function showAttributes(event)     {        var msg = "";        var theRect   = event.target;        var theParent = theRect.parentNode;        var theID     = theRect.getAttribute("id");        var xPosition = theRect.getAttribute("x");        var yPosition = theRect.getAttribute("y");        var theWidth  = theRect.getAttribute("width");        var theHeight = theRect.getAttribute("height");        msg += "Rectangle ID: " + theID     + "\n";        msg += "x coordinate: " + xPosition + "\n";        msg += "y coordinate: " + yPosition + "\n";        msg += "width:        " + theWidth  + "\n";        msg += "height:       " + theHeight + "\n";        alert(msg);     }   ]]> </script>   <!-- *** SVG code starts here *** -->   <g transform="translate(50,50)">      <text  font-size="24" fill="blue">        Click inside the rectangle:      </text>   </g>   <g transform="translate(50,100)">      <rect  fill="red"            onclick="showAttributes(evt)"            x="10" y="10" width="200" height="100"/>   </g> </svg> 

Remarks

The SVG code in Listing 11.9 renders a red rectangle by means of the following code fragment:

<rect  fill="red"       onclick="showAttributes(evt)"       x="10" y="10" width="200" height="100"/>

When you click on the rectangle with your mouse, the ECMAScript function showAttributes() is invoked, which will extract the values of the various attributes of the rectangle and then display the result in an ECMAScript alert box. This technique is useful when you are debugging your SVG code, particularly when you are dynamically constructing complex string patterns, which may involve elements such as SVG path elements or SVG polygon elements.

You might be wondering why the ECMAScript function showAttributes() is invoked with the variable evt, which is nowhere to be found in the SVG document. The variable evt is a special variable that contains a reference to an event. This variable is always available to you, and you must invoke your ECMAScript functions with this variable whenever you want to process mouse-based events.

Notice how the ECMAScript code begins with the following lines:

<script type="text/ecmascript"> <![CDATA[

The ECMAScript function begins with a comment line followed by the function definition:

// Remove rectangle and add circle function remove(event) {

The ECMAScript function starts by defining an empty string variable msg:

var msg = '";

The next pair of statements retrieve the clicked rectangle and its parent object:

var theRect  = event.target; var theParent = theRect.parentNode;

The next five statements retrieve the values of the attributes id, x, y, width, and height of the clicked rectangle:

var theID   = theRect.getAttribute('id"); var xPosition = theRect.getAttribute('x"); var yPosition = theRect.getAttribute('y"); var theWidth = theRect.getAttribute('width"); var theHeight = theRect.getAttribute('height");

The last assignment statement concatenates the values of the preceding variables in preparation for display:

msg += "Rectangle ID: " + theID   + "\n"; msg += "x coordinate: " + xPosition + "\n"; msg += "y coordinate: " + yPosition + "\n"; msg += "width:        " + theWidth  + "\n"; msg += "height:       " + theHeight + "\n";

The final statement produces an alert box that contains a string with the values of the attributes of the clicked rectangle:

alert(msg);

The end of the ECMAScript function and the CDATA section consists of the following pair of lines:

   } ]]> </script>

The SVG code for rendering a text string and a rectangle is:

<g transform="translate(50,50)">   <text  font-size="24" fill="blue">      Click inside the rectangle:   </text> </g> <g transform="translate(50,100)">    <rect  onclick="remove(evt)" fill="red"          x="10" y="10" width="200" height="100"/> </g>

The actual amount of SVG code is only a small percentage of the ECMAScript code in Listing 11.9. Later, in Chapter 13 and Chapter 14, you'll see examples of ECMAScript functions that are much longer than the ECMAScript in Listing 11.9; in fact, you can write ECMAScript functions that contain hundreds or thousands of lines of code! Rest assured, though, that the SVG code in this book utilizes a small subset of ECMAScript.

---