The contentScriptType attribute on the 'svg' element specifies the default scripting language for the given document fragment.
It is also possible to specify the scripting language for each individual 'script' element by specifying a type attribute on 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>
| |
|
View this example as SVG (SVG-enabled browsers only)
<!ENTITY % SVG.script.element "INCLUDE" > <![%SVG.script.element;[ <!ENTITY % SVG.script.content "( #PCDATA )" > <!ELEMENT %SVG.script.qname; %SVG.script.content; > <!-- end of SVG.script.element -->]]> <!ENTITY % SVG.script.attlist "INCLUDE" > <
interface SVGScriptElement :
SVGElement,
SVGURIReference,
SVGExternalResourcesRequired {
attribute DOMString type;
// raises DOMException on setting
};
| DOMException |
NO_MODIFICATION_ALLOWED_ERR: Raised on an
attempt to change the value of a readonly
attribute.
|
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:
interface SVGEvent : events::Event {};
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:
interface SVGZoomEvent : events::UIEvent {
readonly attribute SVGRect zoomRectScreen;
readonly attribute float previousScale;
readonly attribute SVGPoint previousTranslate;
readonly attribute float newScale;
readonly attribute SVGPoint newTranslate;
};
The specified zoom rectangle in screen units.
The object itself and its contents are both readonly.
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.
The translation values that will be in place after the zoom operation has been processed.
The object itself and its contents are both readonly.