Global versus Local Variables

---

ECMAScript and Simple SVG path Animation

Consider the oscillating quadrilateral rendered in Figure 13.1.

Figure 13.1: A toggling quadrilateral.

The SVG document in Listing 13.1 demonstrates how to define an ECMAScript function in order to stop a 'toggling' quadrilateral.

Listing 13.1 togglePath1.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">   <script type="text/ecmascript">     <![CDATA[     var toggleCount = 0.;     var shortPause  = 100.;     var points      = "";     var polyNode    = null;     var theTimeout  = null;     var svgDocument = null;     var target      = null;     var gcNode      = null;     function init(event)     {        target = event.getTarget();        svgDocument = target.getOwnerDocument();        gcNode = svgDocument.getElementById("gc");        theTimeout = setTimeout("window.drawPath()",                                shortPause);     }     function updateToggleCount()     {        toggleCount += 1;     }     function drawPath()     {        polyNode = svgDocument.getElementById(                                   "thePolygon");        points = polyNode.getAttribute("points");        updateToggleCount();        if( toggleCount % 2 == 0 )        {           points = "100,100 300,100 300,200 200,200"           polyNode.setAttribute("points", points);           polyNode.setAttribute("fill", 'red');        }        else        {           points = "250,100 300,100 300,200 200,200"           polyNode.setAttribute("points", points);           polyNode.setAttribute("fill", 'green');        }        theTimeout = setTimeout("drawPath()",                                shortPause);     }     function stopAnimation(event)     {        window.clearTimeout(theTimeout);     }   ]]> </script>   <!-- ============================ -->   <g  transform="translate(10,10)">     <rect x="0" y="0"           width="800" height="500"           fill="none" stroke="none"/>     <!-- render blue quadrilateral -->     <polygon               onclick="stopAnimation(evt)"              points="200,100 300,100 300,200 200,200"              fill="blue"/>     <!-- Display text message -->     <text x="300" y="50"           font-family="Verdana"           font-size="25" text-anchor="middle">       Click inside the quadrilateral to stop animation     </text>   </g>   </svg>

Remarks

The SVG code in Listing 13.1 demonstrates how to render two quadrilaterals in an alternating fashion, thereby creating a 'toggling' effect that continues until you click inside one of the quadrilaterals. The code in this example starts with the definition of a set of global variables as listed below:

var toggleCount = 0.; var shortPause  = 100.; var points      = ""; var polyNode    = null; var theTimeout  = null; var svgDocument = null; var target      = null; var gcNode      = null;

The variable toggleCount is incremented each time a quadrilateral is rendered, and its value controls which of the two quadrilaterals will be rendered.

The variable shortPause is measured in milliseconds, and it is used as an internal delay between the rendering of successive quadrilaterals.

The variable points is a string variable that will contain the set of points that specify the vertices of the rendered polygon.

The variable polyNode is used as a 'reference' to the SVG polygon element whose id attribute has the value thePolygon.

The variable theTimeout is used for clearing the timer in order to switch off the animation when you click inside one of the quadrilaterals with your mouse.

Before discussing the variables document, target, and gcNode that are initialized in the ECMAScript function init(), observe that the animation sequence for this example is initiated by the following code fragment:

<svg width="100%" height="100%" onload="init(evt)"      xmlns="http://www.w3.org/2000/svg">

The value of the onload attribute specifies an ECMAScript function that will be executed as soon as the SVG document is loaded. In this case, the ECMAScript function is init(), and its contents are listed below:

function init(event) {     target = event.getTarget();     svgDocument = target.getOwnerDocument();     gcNode = svgDocument.getElementById("gc");     theTimeout = setTimeout("window.drawPath()",                             shortPause);  }

The variable target is initialized by the following line of code:

target = event.getTarget();

The variable gcNode is initialized by the following line of code:

gcNode = svgDocument.getElementById("gc");

The ECMAScript function drawPath() contains the code for updating the points in the existing SVG polygon element (whose gc attribute has the value thePolygon). The first part of this function is shown below:

polyNode = svgDocument.getElementById(                            "thePolygon"); points = polyNode.getAttribute("points"); updateToggleCount();

This function calls the ECMAScript function updateToggleCount(), which simply increments the value of the variable toggleCount.

The following 'if/else' block of code sets the new value for the points attribute, depending on whether toggleCount is even or odd:

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

The next statement causes the drawPath() function to call itself after a delay of shortPause milliseconds:

theTimeout = setTimeout("drawPath()",                         shortPause);

The last ECMAScript function is stopAnimation(), which stops the animation:

function stopAnimation() {    window.clearTimeout(theTimeout); } 

The following 'mouse aware' SVG rectangle invokes the function stopAnimation() with the built-in variable evt when you click inside the rectangle with your mouse:

<!-- render blue quadrilateral --> <polygon           onclick="stopAnimation(evt)"          points="200,100 300,100 300,200 200,200"          fill="blue"/>

The last section of code in this SVG document displays a text string that tells users how they can stop the animation:

<!-- Display text message -->   <text x="300" y="50"         font-family="Verdana"         font-size="25" text-anchor="middle">     Click inside the quadrilateral to stop animation   </text>

---