SVG Code Template for This Chapter

---

Updating Attributes of SVG path Elements

Consider the rectangle rendered in Figure 12.1.

Figure 12.1: A modifiable path-based rectangle.

The SVG document in Listing 12.1 demonstrates how to define an ECMAScript function that updates the points in an SVG path element.

Listing 12.1 changePath1.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">   <!-- Capture mouse clicks and update path -->   <script type="text/ecmascript">     <![CDATA[     var clickCount = 0.;     var newPath    = "";     var points     = "";     var pathNode   = null;     function clickPath1(event)     {        pathNode   = event.target;        points = pathNode.getAttribute("points");        ++clickCount;        if( clickCount % 2 == 0 )        {           str = "100,100 300,100 300,200 200,200"           pathNode.setAttribute("points", str);           pathNode.setAttribute("fill", 'red');        }        else        {           str = "250,100 300,100 300,200 200,200"           pathNode.setAttribute("points", str);           pathNode.setAttribute("fill", 'green');        }     }   ]]> </script> <!-- ==================================== --> <g transform="translate(10,10)">   <rect x="0" y="0"         width="800" height="500"         fill="none" stroke="none"/>   <!-- Specify function to handle mouse -->   <!-- click and update the path -->   <polygon onclick="clickPath1(evt)"            points="200,100 300,100 300,200 200,200"            fill="blue"/>   <!-- Display text message -->   <text x="250" y="50"         font-family="Verdana"         font-size="25" text-anchor="middle">     Click inside the polygon:   </text> </g> </svg>

Remarks

The SVG code in Listing 12.1 renders a polygon with the following code fragment:

<polygon onclick="clickPath1(evt)"          points="200,100 300,100 300,200 200,200"          fill="blue"/>

This polygon is initially a blue rectangle, and it is 'mouse-aware' because of the following onclick attribute:

onclick="clickPath1(evt)"

When you click inside the rectangle, the ECMAScript function mouseClick1() is executed, which accesses the SVG path element and then the contents of the points attribute with the following statements:

var pathNode = event.target; var points = pathNode.getAttribute("points");

The global ECMAScript variable clickCount is incremented each time you click on your mouse inside the polygon by means of a simple statement:

++clickCount;

The preceding line of code is typical in languages such as Java, C/C++ (as well as ECMAScript), and it will be used throughout this book. If you are not familiar with this construct, you can think of it as being essentially equivalent (ignoring the concepts of post-increment and pre-increment) to the following:

clickCount += 1;

The 'if/else' portion of the ECMAScript code determines which block of code to execute. Each block assigns a value to the ECMAScript variable str that is used for assigning a value to the points attribute of an SVG path element that represents a quadrilateral. The fill attribute of the SVG path element is assigned a hard-coded value of 'red' or 'green,' depending on the block of code, as shown below:

if( clickCount % 2 == 0 ) {    str = "100,100 300,100 300,200 200,200"    pathNode.setAttribute("points", str);    pathNode.setAttribute("fill", 'red'); } else {    str = "250,100 300,100 300,200 200,200"    pathNode.setAttribute("points", str);    pathNode.setAttribute("fill", 'green'); }

If you have an SVG document with multiple geometric objects, you have the ability to specify a different ECMAScript function for each geometric object, based on the type of processing that you need to do.

The text message is rendered with the following code fragment:

<text x="250" y="50"       font-family="Verdana"       font-size="25" text-anchor="middle">   Click inside the path </text>

As obvious as it may seem, you need to provide some type of instruction for users, otherwise they'll be presented with a pair of toggling quadrilaterals without realizing that they are expected to click on their mouse!

---