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.
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
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.
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
Animatable: no.
Keyboard Events
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.