Updating an SVG Element via ECMAScript

---

Interactively Adding SVG Elements

Consider the grid of rectangles rendered in Figure 12.6.

Figure 12.6: Adding circles to a grid of rectangles.

The SVG document in Listing 12.6 demonstrates how to use the SVG onclick element in order to invoke an ECMAScript function that adds an SVG circle element based on the value of the id attribute of the clicked rectangle.

Listing 12.6 XsOsBoard2.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%" onload="init(evt)"     xmlns="http://www.w3.org/2000/svg">  <desc>Capture mouse click events</desc>  <script type="text/ecmascript">    <![CDATA[      function init(evt) {}      function mouseClick1(evt)      {         var rect     = evt.target;         var parent   = rect.parentNode;         var svgDocument = parent.getOwnerDocument();         var rectID = rect.getAttribute("id");         var xPos   = rect.getAttribute("x");         var yPos   = rect.getAttribute("y");         var width  = rect.getAttribute("width");         var height = rect.getAttribute("height");         var cx    = 1.*xPos;         var cy    = 1.*yPos;         cx        += 1.*width/2;         cy        += 1.*height/2;         var style = "";         var idVal = 1.*rectID.substr(4);         if(idVal % 2 == 0) { style = "fill:red"; }         else               { style = "fill:yellow"; }         circleNode = svgDocument.createElement("circle");         circleNode.setAttribute("x",     xPos);         circleNode.setAttribute("y",     yPos);         circleNode.setAttribute("cx",    cx);         circleNode.setAttribute("cy",    cy);         circleNode.setAttribute("style", style);         circleNode.setAttribute("r",     width/2);         parent.appendChild(circleNode);      }  ]]> </script>  <!-- ==================================== -->  <g transform="translate(50,50)">     <text x="0" y="0" font-size="30">       Click inside the grid     </text>  </g>  <!-- rectangular background -->  <g  transform="translate(50,70)">     <!-- first row -->     <rect  fill="red"           width="100" height="100" x="0"   y="0"           onclick="mouseClick1(evt)"/>     <rect  fill="blue"           width="100" height="100" x="100" y="0"           onclick="mouseClick1(evt)"/>     <rect  fill="red"           width="100" height="100" x="200" y="0"           onclick="mouseClick1(evt)"/>     <!-- second row -->     <rect  fill="blue"           width="100" height="100" x="0"   y="100"           onclick="mouseClick1(evt)"/>     <rect  fill="red"           width="100" height="100" x="100" y="100"           onclick="mouseClick1(evt)"/>     <rect  fill="blue"           width="100" height="100" x="200" y="100"           onclick="mouseClick1(evt)"/>     <!-- third row -->     <rect  fill="red"           width="100" height="100" x="0"   y="200"           onclick="mouseClick1(evt)"/>     <rect  fill="blue"           width="100" height="100" x="100" y="200"           onclick="mouseClick1(evt)"/>     <rect  fill="red"           width="100" height="100" x="200" y="200"           onclick="mouseClick1(evt)"/>  </g>  </svg>

Remarks

As you've probably surmised, the SVG document in Listing 12.6 is the starting point for a game of 'TicTacToe.' The code starts by creating a 3x3 rectangular grid of 'mouse-aware' rectangles. For brevity, only the code fragment for the upper-left rectangle is given below:

<rect  fill="red"       width="100" height="100" x="0" y="0"       onclick="mouseClick1(evt)"/>

Each time you click on your mouse on one of the nine 'mouse-aware' rectangles, the ECMAScript function mouseClick1() is invoked with the built-in variable evt. This ECMAScript function determines the values of the attributes of the associated rectangle and uses them in order to assign appropriate values to the attributes of a dynamically created SVG circle element that is superimposed on the existing rectangle. The code fragment for the SVG circle element is:

circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("x",     xPos); circleNode.setAttribute("y",     yPos); circleNode.setAttribute("cx",    cx); circleNode.setAttribute("cy",    cy); circleNode.setAttribute("style", style); circleNode.setAttribute("r",     width/2);

The color of a new circle is either green or white, based on whether or not the integer-valued suffix of the id attribute of the clicked rectangle is even or odd. For example, if the clicked rectangle has an id value of rect2, rect4, rect6, or rect8, then its integer-valued suffix is 2, 4, 6, or 8, respectively, which means that the newly added circle will be green. The other rectangles have id values of rect1, rect3, rect5, rect7, or rect9, which means that their integer-valued suffix is 1, 3, 5, 7, or 9, respectively, and therefore they will be drawn as white circles. The code for making this determination is quite easy and it's listed below. Keep in mind that rectID is the value of the id attribute of the clicked rectangle:

var idVal  = 1.*rectID.substr(4); if(idVal % 2 == 0) { style = "fill:green"; } else               { style = "fill:white"; }

---