Adding an SVG Element via ECMAScript

---

Updating an SVG Element via ECMAScript

Consider the set of rectangles rendered in Figure 12.5.

Figure 12.5: Dynamically updating multiple SVG elements.

The SVG document in Listing 12.5 demonstrates how to define an ECMAScript function in order to dynamically populate the screen with a grid of colored rectangles.

Listing 12.5 updateRectangles1.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">   <script type="text/ecmascript">    <![CDATA[     var rectID      = "";     var style       = "";     var color       = "";     var idStr       = "";     var idVal       = 0.;     var altVal1     = 0.;     var altVal2     = 0.;     var rect        = null;     var altRect1    = null;     var altRect2    = null;     var parent      = null;     var svgDocument = null;     function mouseClick1(evt)     {        rect   = evt.target;        parent = rect.parentNode;        svgDocument = parent.getOwnerDocument();        rectID   = rect.getAttribute("id");        idVal    = 1.*rectID.substr(4);        altVal1  = (idVal+1)%4;        altID1   = "rect" + altVal1;        altVal2  = (idVal+2)%4;        altID2   = "rect" + altVal2;        altRect1 = svgDocument.getElementById(altID1);        style    = altRect1.getAttribute("style");        color    = style.substr(5,3);        if( color == "red" )        {           altRect1.setAttribute("style", "fill:blue");        }        else        {           altRect1.setAttribute("style", "fill:red");        }        altRect2 = svgDocument.getElementById(altID2);        style    = altRect2.getAttribute("style");        color    = style.substr(5,3);        if( color == "red" )        {           altRect2.setAttribute("style", "fill:blue");        }        else        {           altRect2.setAttribute("style", "fill:red");        }     }   ]]> </script>   <!-- ==================================== -->   <g transform="translate(50,50)">      <text x="0" y="0" font-size="30">        Click inside any rectangle:      </text>   </g>   <g  transform="translate(50,100)">      <!-- first row -->      <rect  style="fill:red"            width="100" height="100" x="0"   y="0"            onclick="mouseClick1(evt)"/>      <rect  style="fill:blue"            width="100" height="100" x="200" y="0"            onclick="mouseClick1(evt)"/>      <!-- second row -->      <rect  style="fill:red"            width="100" height="100" x="0"   y="150"            onclick="mouseClick1(evt)"/>      <rect  style="fill:blue"            width="100" height="100" x="200" y="150"            onclick="mouseClick1(evt)"/>   </g>   </svg>

Remarks

Listing 12.5 is definitely more complicated than the previous examples! In order to simplify the description of the code, here's a high-level description of the logic: whenever you click on one of the four rectangles, extract the value of its id attribute in order to update the fill attribute of the two 'subsequent' rectangles, where the 'subsequent' rectangles means the next two rectangles that are encountered while moving in a clockwise fashion. For example, if you click on the rectangle whose id attribute has value rect1, then the next two subsequent rectangles have id attribute values of rect2 and rect3. Similarly, if you click on the rectangle whose id attribute has value rect3, then the next two subsequent rectangles have id attribute values of rect0 and rect1.

Now let's examine the logic of the code in more detail.

First, the text message that provides instructions for users, telling them to click inside the rendered rectangle with their mouse, is given below:

<g transform="translate(50,50)">    <text x="0" y="0" font-size="30">      Click inside the grid    </text> </g>

Next, the SVG code that makes the four rectangles 'mouse-aware' is given below:

<!-- first row --> <rect  style="fill:red"       width="100" height="100" x="0"   y="0"       onclick="mouseClick1(evt)"/> <rect  style="fill:blue"       width="100" height="100" x="200" y="0"       onclick="mouseClick1(evt)"/> <!-- second row --> <rect  style="fill:red"        width="100" height="100" x="0"   y="200"        onclick="mouseClick1(evt)"/> <rect  style="fill:blue"       width="100" height="100" x="200" y="200"          onclick="mouseClick1(evt)"/>

When you click on one of the four rectangles with your mouse, the ECMAScript function mouseClick1() is invoked with the built-in variable evt. The following pair of lines in the ECMAScript function mouseClick1() determine the value of the id attribute of the currently clicked rectangle:

rectID  = rect.getAttribute("id"); idVal  = 1.*rectID.substr(4);

The next thing that must be done is to compute the value of the id attribute of the two subsequent rectangles, and that's accomplished with the following four lines of code:

altVal1 = (idVal+1)%4; altID1  = "rect" + altVal1; altVal2 = (idVal+2)%4; altID2  = "rect" + altVal2;

Notice how the following 'if/else' code block sets the value of the style attribute of the first subsequent rectangle:

if( color == "red" ) {    altRect1.setAttribute("style", "fill:blue"); } else {    altRect1.setAttribute("style", "fill:red"); }

In a similar fashion, the following code updates the value of the style attribute of the second subsequent rectangle:

altRect2 = svgDocument.getElementById(altID2); style    = altRect2.getAttribute("style"); color    = style.substr(5,3); if( color == "red" ) {    altRect2.setAttribute("style", "fill:blue"); } else {    altRect2.setAttribute("style", "fill:red"); }

Now that you've read the explanation of the code in Listing 12.5, you can see that it really isn't that complicated. You might even have noticed that this is an example where the explanation is lengthier and more involved than the actual code!

---