18 Scripting

Contents

• 18.1 Specifying the scripting language
  • 18.1.1 Specifying the default scripting language
  • 18.1.2 Local declaration of a scripting language
• 18.2 The 'script' element
• 18.3 Event handling
• 18.4 Event attributes
• 18.5 DOM interfaces
  • 18.5.1 Interface SVGScriptElement
  • 18.5.2 Interface SVGZoomEvent

18.1 Specifying the scripting language

18.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 shall determine the default scripting language for an SVG document fragment 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 shall set the default scripting lanuage to "text/ecmascript".

18.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.

18.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 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 December 1999//EN" 
  "http://www.w3.org/Graphics/SVG/SVG-19991203.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
  %xlinkRefAttrs;
  xlink:href CDATA #IMPLIED >

18.3 Event handling

Events can cause scripts to execute when either of the following has occurred:

• Event attributes such as "onclick" or "onload" are assigned to particular elements, where the value of the event attributes contains script which is executed when the given event occurs.
• Event listeners as described in [DOM2-EVENTS] are defined which are invoked when a given event happens on a given object

Related sections of the spec:

• User interface events describes how an SVG user agent handles events such as pointer movements events (e.g., mouse movement) and activation events (e.g., mouse click).
• Relationship with DOM2 events describes what parts of DOM are supported by SVG and how to register event listeners

18.4 Event attributes

The following event attributes are available on many SVG elements, including its graphics elements and its container elements.

Mouse Events

• onfocusin
• onfocusout
• ongainselection
• onloseselection
• onactivate
• onmousedown
• onmouseup
• onclick
• ondblclick
• onmouseover
• onmousemove
• onmouseout

Animatable: no.

Keyboard Events

• onkeydown
• onkeypress
• onkeyup

Animatable: no.

State Change Events

• onload (the event is triggered at the point at which the user agent has fully parsed the element and its descendants and is ready to act appropriately upon that element, such as being ready to render the element to the target device. Referenced external resources such as images and style sheets are not necessarily loaded, parsed and ready to render)
• 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.)
• 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)
• onerror (corresponds to DOM level 2 error event)
• onabort (corresponds to DOM level 2 abort event)

Animatable: no.

A load event is dispatched only to the element to which the event applies; it is not dispatched to its ancestors. For example, if an 'image' element and its parent 'g' element both have event listeners for load events, when the 'image' element has been loaded, only its event listener will be invoked. (The 'g' element's event listener will indeed get invoked, but the invocation will happen when the 'g' itself has been loaded.)

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

18.5 DOM interfaces

18.5.1 Interface SVGScriptElement

The SVGScriptElement interface corresponds to the 'script' element.

interface SVGScriptElement : SVGElement  {
  attribute DOMString language;

  attribute DOMString role;
  attribute DOMString title;
  attribute DOMString show;
  attribute DOMString actuate;
  attribute DOMString href;
  attribute DOMString target;
};

18.5.2 Interface SVGZoomEvent

The zoom event handler occurs before the zoom event is processed. The remainder of the DOM represents the previous state of the document. The document will be updated upon normal return from the event handler.

interface SVGZoomEvent : UIEvent  {
  // Information about the specified zoom rectangle in screen units.
  attribute SVGRect zoomRectScreen;

  // Information about the previous zoom and pan factors
  attribute float previousScale;
  attribute SVGPoint previousTranslate;

  // Information about the new zoom and pan factors which will
  // be applied upon normal return from the event handler.
  attribute float newScale;
  attribute SVGPoint newTranslate;
};

The UI event type for a zoom event is:

zoom

The zoom event occurs when the user initiates an action which causes the current view of the SVG document fragment to be rescaled. Event handlers are only recognized on 'svg' elements.

• Bubbles: Yes
• Cancelable: No
• Context Info: zoomRectScreen, previousScale, previousTranslate, newScale, newTranslate, screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, relatedNode.
  (screenX, screenY, clientX, clientY indicate the center of the zoom area, with clientX, clientY in viewport coordinates for the corresponding 'svg' element. relatedNode is the corresponding 'svg' element.)