SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties
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.
contentScriptType= "
content-type"
Identifies the default scripting language for the given SVG document fragment. This attribute sets the default scripting language used to process the value strings in event attributes. This language must be used for all instances of script that do not specify their own scripting language. The value
content-typespecifies a media type, per MIME Part Two: Media Types [RFC2046]. The default value is
'application/ecmascript'[RFC4329].
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’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 script01defines a functioncircle_clickwhich 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 theSVG user agentdoes not support the scripting language then the‘script’element must not be executed.
Example script01
View this example as SVG (SVG-enabled browsers only)
Identifies the scripting language for the given
‘script’element. The value
content-typespecifies a media type, per Multipurpose Internet Mail Extensions (MIME) Part Two [RFC2046]. If a
‘type’is not provided, the value of
‘contentScriptType’on the
‘svg’element shall be used, which in turn defaults to "application/ecmascript" [RFC4329]. If a
‘script’element falls outside of the
outermost svg elementand the
‘type’is not provided, the
‘type’must default to "application/ecmascript" [RFC4329].
Animatable: no.
xlink:href= "
"
An IRI reference to an external resource containing the script code.
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 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 theanimation elementsand most of thegraphics elementsandcontainer elements. The‘onload’event attribute is classified as both agraphical event attributeand ananimation event attribute. (See the definition for each element to determine whether it can have agraphical event attributespecified on it.)
Attribute definitions:
onload= "
"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the SVGLoad event are fired on the element the attribute is specified on.
Animatable: no.
18.4.2 Event attributes on graphics and container elements
Below are the definitions for thegraphical event attributes. These can be specified on mostgraphics elementsandcontainer elements. (See the definition for each element to determine whether it can have agraphical event attributespecified on it.)
Note that‘onload’, defined above, is also classified as agraphical event attribute.
Attribute definitions:
onfocusin= "
"
onfocusout= "
"
onactivate= "
"
onclick= "
"
onmousedown= "
"
onmouseup= "
"
onmouseover= "
"
onmousemove= "
"
onmouseout= "
"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the corresponding event are fired on the element the attribute is specified on. See the Complete list of support events to determine which event each of these event attributes corresponds to.
Animatable: no.
18.4.3 Document-level event attributes
Below are the definitions for thedocument event attributes. These can be specified only on‘svg’elements.
Attribute definitions:
onunload= "
"
onabort= "
"
onerror= "
"
onresize= "
"
onscroll= "
"
onzoom= "
"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the corresponding event are fired on the element the attribute is specified on. See the Complete list of support events to determine which event each of these event attributes corresponds to.
Animatable: no.
18.4.4 Animation event attributes
Below are the definitions for theanimation event attributes. These can be specified on theanimation elements.
Note that‘onload’, defined above, is also classified as ananimation event attribute.
Attribute definitions:
onbegin= "
"
onend= "
"
onrepeat= "
"
Specifies some script to execute when "bubbling" or "at target" phase listeners for the corresponding event are fired on the element the attribute is specified on. See the Complete list of support events to determine which event each of these event attributes corresponds to.
Animatable: no.
18.5 DOM interfaces
18.5.1 Interface SVGScriptElement
The SVGScriptElement interface corresponds to the
‘script’element.
interfaceSVGScriptElement: 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.)