17 Scripting

Contents

• 17.1 Specifying the scripting language
  • 17.1.1 Specifying the default scripting language
  • 17.1.2 Local declaration of a scripting language
• 17.2 The <script> element

17.1 Specifying the scripting language

17.1.1 Specifying the default scripting language

The contentScriptType attribute on the <svg> element specifies the default scripting language for all scripts in the given document.

In the absense of a contentScriptType attribute, the default can be set by a "Content-Script-Type" HTTP header:

Content-Script-Type: <contentType>

User agents should determine the default scripting language for an SVG document according to the following steps (highest to lowest priority):

1. If a contentType attribute is provided on the <svg> element, then the value of that attribute determines the default scripting language.
2. Otherwise, if any HTTP headers specify the "Content-Script-Type", the last one in the character stream determines the default scripting language.

Documents that do not specify a default scripting language should set the default scripting lanuage to "text/ecmascript".

17.1.2 Local declaration of a scripting language

It is also possible to specify the scripting language for each individual <script> element by specifying a language attribute on the <script> element.

17.2 The <script> element

A <script> element can appear as a subelement to any <defs> element. A <script> element is equivalent to the <script> element in HTML and thus is the place for scripts (e.g., ECMAScript). Any functions defined within any <script> element have a "global" scope across the entire current SVG document.

The following is an example of defining an ECMAScript function and defining an event handler that invokes that function:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" 
  "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width="4in" height="3in">
  <defs>
    <script><![CDATA[
      /* Beep on mouseclick */
      MouseClickHandler() { beep(); }
     ]]>
    </script>
  </defs>
  <circle onclick="MouseClickHandler()" r="85"/>
</svg>

Download this example

<!ELEMENT script (#PCDATA)* >
<!ATTLIST script
  language CDATA #IMPLIED
  xmlns:xlink CDATA #FIXED "http://www.w3.org/XML/XLink/0.9"
  xlink:type (simple|extended|locator|arc) #FIXED "simple" 
  xlink:role CDATA #IMPLIED
  xlink:title CDATA #IMPLIED
  xlink:show (new|parsed|replace) #FIXED 'parsed'
  xlink:actuate (user|auto) #FIXED 'auto'
  xlink:href CDATA #REQUIRED >

17.3 Event Handling

Any <g>, <image>, <path>, <text> or vector graphic shape (such as a <rect>) can be assigned any of the following standard HTML event handlers:

Mouse Events

• onmousedown
• onmouseup
• onclick
• ondblclick
• onmouseover
• onmousemove
• onmouseout

Keyboard Events

• onkeydown
• onkeypress
• onkeyup

State Change Events

• onload
• onerror (corresponds to DOM level 2 error event)
• onabort (corresponds to DOM level 2 abort event)
• onunload (only applicable to outermost <svg> elements which are to be mapped into a rectangular region/viewport)
• onzoom (only applicable to outermost <svg> elements which are to be mapped into a rectangular region/viewport)
• onresize (only applicable to outermost <svg> elements which are to be mapped into a rectangular region/viewport. Corresponds to DOM level 2 resize event.)
• onscroll (only applicable to outermost <svg> elements which are to be mapped into a rectangular region/viewport. Corresponds to DOM level 2 scroll event.)

Additionally, SVG's scripting engine needs to have the altKey, ctrlKey and shiftKey properties available.