Interactivity - Scripting

SVG's support for scripting also makes web content more interactive. Using scripts, we can specify events to be triggered with certain actions.

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.

For an SVG object to respond to a scripted event, the prefix on is added to the trigger names, so click becomes onclick, mouseover becomes onmouseover, and so forth. Common element events are:

• onload - occurs when SVG file is loaded
• onclick - occurs when mouse down and mouse up occurs over same screen location
• onactivate - occurs when an input device is activated
• onmousedown - occurs when pointing device button is pressed over an element
• onmouseover- occurs when pointing device is moved on to an element
• onmousemove - occurs when pointing device is moved while over an element
• onmouseup - occurs when pointing device button is released
• onmouseout - occurs when pointing device is moved away from an element

The most useful methods for modifying an SVG document are:

• getElementById - the easiest way of finding an element is giving it a unique id
• getStyle - gets the complete style attribute
• setProperty - sets a single property in the style attribute
• getAttribute - get the current value of an element's attribute
• setAttribute - reset the attribute value
• cloneNode - create a new node that is an exact clone

The element <script> is used to insert the the definition of your functions or some general code to be executed. You can placed the scripts inside an SVG document or call it from an external file.

To place Javascript inside an SVG document, here is the syntax:

.......  <script>    <![CDATA[    ................. your script......................   ]></script > .........

To use an external javascript (".js") file, we set a reference in the head-section of the SVG file. Here is the syntax for referencing external .js-files:

.......  < script xlink:href="myScript.js" language="JavaScript" />  ..........