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.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 the given document fragment.

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 type attribute on the 'script' element.

18.2 The 'script' 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 20000303 Stylable//EN" 
  "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="4in" height="3in">
  <defs>
    <script type="text/ecmascript"><![CDATA[
      /* Every time you click, increase the radius by 10. */
      function MouseClickHandler(MouseEvent evt) { evt.target.r+=10; }
     ]]>
    </script>
  </defs>
  <circle onclick="MouseClickHandler(evt)" cx="100" cy="100" r="85"/>
</svg>

Download this example

<!ELEMENT script (#PCDATA) >
<!ATTLIST script
  %stdAttrs;
  type %ContentType; #REQUIRED
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  externalResourcesRequired %Boolean; #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
• 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 that are required must be loaded, parsed and ready to render before the event is triggered. Optional external resources are not required to be ready for the event to be triggered.)
• 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

The following interfaces are defined below: SVGScriptElement, SVGZoomEvent.

Interface SVGScriptElement

The SVGScriptElement interface corresponds to the 'script' element.

IDL Definition

interface SVGScriptElement : SVGElement, SVGURIReference {
           attribute DOMString language;
};

Attributes

DOMString language

Corresponds to attribute language on the given 'script' element.

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.

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

IDL Definition

interface SVGZoomEvent : UIEvent {
           attribute SVGRect zoomRectScreen;
           attribute float previousScale;
           attribute SVGPoint previousTranslate;
           attribute float newScale;
           attribute SVGPoint newTranslate;
};

Attributes

SVGRect zoomRectScreen

The specified zoom rectangle in screen units.

float previousScale

The scale factor from previous zoom operations that was in place before the zoom operation occurred.

SVGPoint previousTranslate

The translation values from previous zoom operations that were in place before the zoom operation occurred.

float newScale

The scale factor that will be in place after the zoom operation has been processed.

SVGPoint newTranslate

The translation values that will be in place after the zoom operation has been processed.