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 = "%ContentType;"
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 %ContentType; specifies a media type, per [RFC2045]. The default value is "text/ecmascript".
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 20000802//EN" 
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500">
  <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" style="fill:none; stroke:blue"/>

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

  <text x="300" y="480" 
        style="font-family:Verdana; font-size:35; text-anchor:middle">
    Click on circle to change its size
  </text>
</svg>
Example script01
Example script01a - invoke an ECMAScript function from an onclick event - before first click     Example script01b - invoke an ECMAScript function from an onclick event - after first click

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

<!ELEMENT script (#PCDATA) >
<!ATTLIST script
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  externalResourcesRequired %Boolean; #IMPLIED
  type %ContentType; #REQUIRED >

Attribute definitions:

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

Attributes defined elsewhere:
%stdAttrs;, %xlinkRefAttrs;, href, externalResourcesRequired.

18.3 Event handling

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

Related sections of the spec:

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 % graphicsElementEvents
  "onfocusin %Script; #IMPLIED
   onfocusout %Script; #IMPLIED
   onactivate %Script; #IMPLIED
   onclick %Script; #IMPLIED
   onmousedown %Script; #IMPLIED
   onmouseup %Script; #IMPLIED
   onmouseover %Script; #IMPLIED
   onmousemove %Script; #IMPLIED
   onmouseout %Script; #IMPLIED
   onload %Script; #IMPLIED" >

Document-level event attributes

<!ENTITY % documentEvents
  "onunload %Script; #IMPLIED
   onabort %Script; #IMPLIED
   onerror %Script; #IMPLIED
   onresize %Script; #IMPLIED
   onscroll %Script; #IMPLIED
   onzoom %Script; #IMPLIED" >

Animation event attributes

<!ENTITY % animationEvents
  "onbegin %Script; #IMPLIED
   onend %Script; #IMPLIED
   onrepeat %Script; #IMPLIED" >

Animatable: no.


18.5 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 when the node is readonly.

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.
SVGUnload
See SVGUnload event.
SVGAbort
See SVGAbort event.
SVGError
See SVGError event.
SVGResize
See SVGResize event.
SVGScroll
See SVGScroll event.

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.

IDL Definition
interface SVGZoomEvent : events::UIEvent { 
           attribute SVGRect zoomRectScreen;
                       // raises DOMException on setting
           attribute float previousScale;
                       // raises DOMException on setting
           attribute SVGPoint previousTranslate;
                       // raises DOMException on setting
           attribute float newScale;
                       // raises DOMException on setting
           attribute SVGPoint newTranslate;
                       // raises DOMException on setting
};

Attributes
SVGRect zoomRectScreen
The specified zoom rectangle in screen units.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.
float previousScale
The scale factor from previous zoom operations that was in place before the zoom operation occurred.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.
SVGPoint previousTranslate
The translation values from previous zoom operations that were in place before the zoom operation occurred.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.
float newScale
The scale factor that will be in place after the zoom operation has been processed.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.
SVGPoint newTranslate
The translation values that will be in place after the zoom operation has been processed.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.