Perl Graphics Programming

SVG Scripting with JavaScript

SVG elements can be manipulated using ECMAscript (better known as JavaScript). JavaScript scripts are attached to SVG objects as callbacks associated with a particular event. A script can be called when an element is first loaded, when the mouse passes over it, or when the mouse button is clicked on the element. Some of the element events are:

onfocusin
onfocusout
onactivate
onclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onload

Scripts can also be called for certain document events:

onunload
onabort
onerror
onresize
onscroll
onzoom

Or they can be triggered at three points in the execution of an animation:

onbegin
onend
onrepeat

XML specifies a special tag for character data such as scripts that may have embedded XML tags. The script should be wrapped up in a character data (CDATA) tag:

<![CDATA[ ...character data goes here... ]]>

With JavaScript, you can access and manipulate most attributes of an element using the DOM interface. JavaScript can be used as an alternative to the animation tags for creating animations. For a complete reference to JavaScript, see JavaScript: The Definitive Guide by David Flanagan (O’Reilly).

The next example uses XML::Writer to create an SVG file that is very similar to the SWF::DisplayItem example in Chapter 9. The result is two SVG images: a top-level image that consists of a pink background, and the block of animated squares. Each of the squares in the grid has a mouseover event associated with it that turns ...