JavaScript in SVG (Include, Events)

By mbystedt on Feb 27, 2014, 8:04:14 PM

The other sections of the tutorial deal with how to use SVG to make beautiful shapes. SMIL animation, SVG built-in animation language, can do quite a bit by itself. If you're looking to do more general purpose programming in SVG, JavaScript is usually how it is done. So, let's put those shapes to work by using JavaScript.

Most SVG viewers support JavaScript or ECMAScript as the scripting language. The languages are nearly equivalent. The type attribute tells the viewer what language you are intending to use. SVG is not limited to only those languages so including the type is recommended. The example source code uses a type of "text/ecmascript" but "text/javascript" should work just as well.

Adding Javascript

JavaScript can either be put in an external file or embedded inline.

<script type="text/ecmascript" xlink:href="unseth/unseth.js" />

Code 1. Adding JavaScript (ECMAScript) in an external file to a SVG document. The type "text/javascript" will work just as well if viewing in a browser.

<script type="text/ecmascript"><![CDATA[
 
    ...
 
]]></script>

Code 2. Adding inline JavaScript (ECMAScript) to a SVG document. Enclosing the text in a CDATA section avoids problems with brackets and other special characters in XML.

Events and Javascript

To perform an action when an event occurs, you just add the event handler to the associated object. This is much like HTML. Events will even bubble up through the DOM as well. The event names are expected to be in all lowercase letters.

Event	When Called
onclick	When the object is clicked (mouse button down and up)
onmousedown	When the mouse button is pushed down on the object
onmouseup	When the mouse button is released on the object
onmouseover	When the mouse cursor moves over the object
onmousemove	When the mouse moves in the object
onmouseout	When the mouse cursors leaves the object

Table 1. Events for graphical elements.

Tag	Event	When Called
svg	onload	When the page finishes loading

Table 2. Specialized events.

<script type="text/ecmascript"><![CDATA[
...
function updateStats() {
    svgDocument.getElementById("clicks").firstChild.data 
        = "onclick = " + click;
    svgDocument.getElementById("mousedowns").firstChild.data
        = "onmousedown = " + mouseDown;
    ...
}
 
function msClick (evt) {
    click++;
    updateStats();
}
...
]]></script>
 
<circle cx="50%" cy="25%" r="40" fill="lightyellow"
    onclick="msClick()"
    onmousedown="msDown()"
    onmouseup="msUp()"
    onmouseover="msOver()"
    onmousemove="msMove()"
    onmouseout="msOut()"
    />

Example 1. Calling a function on an event. (Download)

Find the SVG Document Root

In all modern browsers, the variable "document" or "window.document" is the document root. I think that's nice and simple.

If the SVG is embedded within an XHTML page then "document" will be the HTML document. This doesn't prevent you from using document.getElementById(...) to get and manipulate a SVG element. I wouldn't expect JavaScript libraries designed to work with HTML to be that useful (or useable) with SVG.

The old Adobe SVG plugin automatically set the variable "svgDocument" to be the SVG document root. This was nonstandard feature of the viewer. One way to ensure everything works nicely is to add an init function that is called by the onload event. You can use the event object to extract and sets the document root.

<svg onload="init(evt)" ...>
<script type="text/ecmascript"><![CDATA[
function init(evt) {
  svgDocument = evt.target.ownerDocument;
}
]]></script>

Code 3. Find and set the document root for code that relied on svgDocument. (Not recommended for new code)