previous next contents elements attributes properties index

14 January 2003

# 18 Scripting

### Contents

.

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

contentScriptType = "content-type"
  Identifies the default scripting language for the given document. This attribute sets the scripting language used to process the value strings in event attributes. The value content-type specifies a media type, per [RFC2045]. The default value is "text/ecmascript" (Note that at the time of publication "text/ecmascript" has not been registered as the media type for ECMAScript. It will continue to be the default unless an alternative is registered).
  Animatable: no.

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

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.

    <?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="text/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)

    <!ENTITY % SVG.script.extra.content "" >
    <!ENTITY % SVG.script.element "INCLUDE" >
    <![%SVG.script.element;[
    <!ENTITY % SVG.script.content
        "( #PCDATA %SVG.script.extra.content; )*"
    >
    <!ELEMENT %SVG.script.qname; %SVG.script.content; >
    <!-- end of SVG.script.element -->]]>
    <!ENTITY % SVG.script.attlist "INCLUDE" >
    <![%SVG.script.attlist;[
    <!ATTLIST %SVG.script.qname;
        %SVG.Core.attrib;
        %SVG.XLink.attrib;
        %SVG.External.attrib;
        type %ContentType.datatype; #REQUIRED
    >

Attribute definitions:

type = "content-type"
  Identifies the scripting language for the given 'script' element. The value content-type specifies a media type, per [RFC2045]. Animatable: no.

## 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 "Document Object Model Events" [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.

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.

#### Event attributes on graphics and container elements

    <!ENTITY % SVG.onfocusin.attrib
        "onfocusin %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onfocusout.attrib
        "onfocusout %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onactivate.attrib
        "onactivate %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onclick.attrib
        "onclick %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onmousedown.attrib
        "onmousedown %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onmouseup.attrib
        "onmouseup %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onmouseover.attrib
        "onmouseover %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onmousemove.attrib
        "onmousemove %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onmouseout.attrib
        "onmouseout %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onload.attrib
        "onload %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.GraphicalEvents.extra.attrib "" >
    <!ENTITY % SVG.GraphicalEvents.attrib
        "%SVG.onfocusin.attrib;
         %SVG.onfocusout.attrib;
         %SVG.onactivate.attrib;
         %SVG.onclick.attrib;
         %SVG.onmousedown.attrib;
         %SVG.onmouseup.attrib;
         %SVG.onmouseover.attrib;
         %SVG.onmousemove.attrib;
         %SVG.onmouseout.attrib;
         %SVG.onload.attrib;
         %SVG.GraphicalEvents.extra.attrib;"
    >

#### Document-level event attributes

    <!ENTITY % SVG.onunload.attrib
        "onunload %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onabort.attrib
        "onabort %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onerror.attrib
        "onerror %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onresize.attrib
        "onresize %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onscroll.attrib
        "onscroll %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onzoom.attrib
        "onzoom %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.DocumentEvents.extra.attrib "" >
    <!ENTITY % SVG.DocumentEvents.attrib
        "%SVG.onunload.attrib;
         %SVG.onabort.attrib;
         %SVG.onerror.attrib;
         %SVG.onresize.attrib;
         %SVG.onscroll.attrib;
         %SVG.onzoom.attrib;
         %SVG.DocumentEvents.extra.attrib;"
    >

#### Animation event attributes

    <!ENTITY % SVG.onbegin.attrib
        "onbegin %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onend.attrib
        "onend %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onrepeat.attrib
        "onrepeat %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.onload.attrib
        "onload %Script.datatype; #IMPLIED"
    >
    <!ENTITY % SVG.AnimationEvents.extra.attrib "" >
    <!ENTITY % SVG.AnimationEvents.attrib
        "%SVG.onbegin.attrib;
         %SVG.onend.attrib;
         %SVG.onrepeat.attrib;
         %SVG.onload.attrib;
         %SVG.AnimationEvents.extra.attrib;"
    >

Animatable: no.

## 18.5 Scripting Module

Elements | Attributes | Content Model
--- | --- | ---
script | Core.attrib, XLink.attrib, type | #PCDATA

### 18.5.1 Scripting Content Set

The Scripting Module defines the Script.class content set.

Content Set Name | Elements in Content Set
--- | ---
Script.class | script

## 18.6 DOM interfaces

The following interfaces are defined below: SVGScriptElement, SVGEvent, SVGZoomEvent.

### Interface SVGScriptElement

The SVGScriptElement interface corresponds to the 'script' element.

IDL Definition

      interface SVGScriptElement :
                      SVGElement,
                      SVGURIReference,
                      SVGExternalResourcesRequired {
                 attribute DOMString type;
                             // raises DOMException on setting
      };

Attributes
  DOMString type
    Corresponds to attribute type on the given 'script' element.
    Exceptions on setting

      DOMException |  | NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

### Interface SVGEvent

The SVG event set contains a list of special event types which are available in SVG.

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

The SVG events use the base DOM Event interface to pass contextual information.

The different types of such events that can occur are:

SVGLoad
  See SVGLoad event.
  - Bubbles: No
  - Cancelable: No
  - Context Info: None
SVGUnload
  See SVGUnload event.
  - Bubbles: No
  - Cancelable: No
  - Context Info: None
SVGAbort
  See SVGAbort event.
  - Bubbles: Yes
  - Cancelable: No
  - Context Info: None
SVGError
  See SVGError event.
  - Bubbles: Yes
  - Cancelable: No
  - Context Info: None
SVGResize
  See SVGResize event.
  - Bubbles: Yes
  - Cancelable: No
  - Context Info: None
SVGScroll
  See SVGScroll event.
  - Bubbles: Yes
  - Cancelable: No
  - Context Info: None

IDL Definition

      interface SVGEvent : events::Event {};

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

IDL Definition

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

Attributes
  readonly SVGRect zoomRectScreen

    The specified zoom rectangle in screen units.

    The object itself and its contents are both readonly.

  readonly float previousScale
    The scale factor from previous zoom operations that was in place before the zoom operation occurred.
  readonly SVGPoint previousTranslate

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

    The object itself and its contents are both readonly.

  readonly float newScale
    The scale factor that will be in place after the zoom operation has been processed.
  readonly SVGPoint newTranslate

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

    The object itself and its contents are both readonly.

previous next contents elements attributes properties index