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.4.1 Event attribute for the SVGLoad event
  • 18.4.2 Event attributes on graphics and container elements
  • 18.4.3 Document-level event attributes
  • 18.4.4 Animation 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 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’ 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.

Example script01 defines a function circle_click which is called by the ‘onclick’ event attribute on the ‘circle’ element. The drawing below on the left is the initial image. The drawing below on the right shows the result after clicking on the circle.

Note that this example demonstrates the use of the ‘onclick’ event attribute for explanatory purposes. The example presupposes the presence of an input device with the same behavioral characteristics as a mouse, which will not always be the case. To support the widest range of users, the ‘onactivate’ event attribute should be used instead of the ‘onclick’ event attribute.

Before attempting to execute the ‘script’ element the resolved media type value for ‘type’ must be inspected. If the SVG user agent does not support the scripting language then the ‘script’ element must not be executed.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example script01 - invoke an ECMAScript function from an onclick event
  </desc>
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript"> <![CDATA[
    function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 100)
        circle.setAttribute("r", currentRadius*2);
      else
        circle.setAttribute("r", currentRadius*0.5);
    }
  ]]> </script>

  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

  <!-- Act on each click event -->
  <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
          fill="red"/>

  <text x="300" y="480" 
        font-family="Verdana" font-size="35" text-anchor="middle">

    Click on circle to change its size
  </text>
</svg>

Example script01

View this example as SVG (SVG-enabled browsers only)

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 values of the event attributes are script which is executed when the given event occurs.
• Event listeners as described in DOM Level 2 Events [DOM2EVENTS] 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.

The complete list of events that are part of the SVG language and SVG DOM and descriptions of those events is provided in Complete list of supported events.

18.4.1 Event attribute for the SVGLoad event

Below is the definition for the ‘onload’ event attribute. It can be specified on all of the animation elements and most of the graphics elements and container elements. The ‘onload’ event attribute is classified as both a graphical event attribute and an animation event attribute. (See the definition for each element to determine whether it can have a graphical event attribute specified on it.)

18.4.2 Event attributes on graphics and container elements

Below are the definitions for the graphical event attributes. These can be specified on most graphics elements and container elements. (See the definition for each element to determine whether it can have a graphical event attribute specified on it.)

Note that ‘onload’, defined above, is also classified as a graphical event attribute.

18.4.3 Document-level event attributes

Below are the definitions for the document event attributes. These can be specified only on ‘svg’ elements.

18.4.4 Animation event attributes

Below are the definitions for the animation event attributes. These can be specified on the animation elements.

Note that ‘onload’, defined above, is also classified as an animation event attribute.

18.5 DOM interfaces

18.5.1 Interface SVGScriptElement

interface SVGScriptElement : SVGElement,
                             SVGURIReference,
                             SVGExternalResourcesRequired {
  attribute DOMString type setraises(DOMException);
};

Attributes:

type (DOMString)

Corresponds to attribute ‘type’ on the given ‘script’ element.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

18.5.2 Interface SVGZoomEvent

A DOM consumer can use the hasFeature of the DOMImplementation interface to determine whether the SVG zoom event set has been implemented by a DOM implementation. The feature string for this event set is "SVGZoomEvents". This string is also used with the createEvent method.

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:

SVGZoom

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. See SVGZoom event.

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

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

Attributes:

zoomRectScreen (readonly SVGRect)

The specified zoom rectangle in screen units.

The SVGRect object is read only.

previousScale (readonly float)

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

previousTranslate (readonly SVGPoint)

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

The SVGPoint object is read only.

newScale (readonly float)

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

newTranslate (readonly SVGPoint)

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

The SVGPoint object is read only.