Error Checking in SVG Documents

---

SVG Code Template for This Chapter

The animation-based examples in this chapter contain at least three ECMAScript functions: an init() function that is executed immediately after the SVG document is loaded into memory, a drawPath() function (or some function with a comparable name) that is invoked from the init() function, and a stopAnimation() function that stops the animation. The stopAnimation() function is executed after some event occurs, which is typically a mouse click on a 'mouse aware' SVG element. Structurally the SVG documents have a format that is similar to the one below:

<?xml version="1.0" standalone="no"?> <!DOCTYPE ....> <svg onload="init(evt)" ...> <script type="text/ecmascript">  <![CDATA[  // global variables here  function init(event)  {     // initialization code goes here     // some more code here     drawPath(event);  }  function drawPath(event)  {     // some code goes here     if( someEventHappens )     {        stopAnimation(event);     }  }  function stopAnimation(event)  {     window.clearTimeout(theTimeout);  }  ]]> </script>  <g transform="translate(10,10)">     <polygon               onclick="stopAnimation(evt)" .../>  </g>  </svg>

The preceding fragment contains the following line, whose purpose is to invoke the function init() immediately after the SVG document is loaded into memory:

<svg onload="init(evt)" ...>

The init() function performs some initialization and then invokes another function, such as drawPath(), in order to perform some type of animation.

The other function, appropriately named stopAnimation(), is invoked when you click inside an SVG polygon element. Note that the particular SVG element is not restricted to polygons; the SVG element can be a rectangle, circle, or other geometric object.

---