script element | SVGScriptElement object
Contains scripts.
  |
DOM Information
Inheritance Hierarchy
Members
The SVGScriptElement object has these types of members:
Events
The SVGScriptElement object has these events.
| Event | Description |
|---|---|
| onload |
Occurs when the browser has fully parsed the element and all of its descendants. |
Properties
The SVGScriptElement object has these properties.
| Property | Description |
|---|---|
|
Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element. | |
|
Gets an | |
|
Gets the scripting language for the given script element. |
Standards information
- Scalable Vector Graphics: Scripting, Section 18.5.1
Remarks
Note In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherit core HTML attributes, properties, events, methods, and styles.
A script element is equivalent to the script element in HTML and is the place for scripts (for example, ECMAScript). Any functions that you define within any script element have a global scope across the entire current document.
Examples
In the following code example, the onclick event attribute on the circle element calls the circle_click function.
<?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>Invoke an ECMAScript function from an onclick event</desc>
<!-- ECMAScript to change the radius with each click. -->
<script type="application/ecmascript">
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="blue"/>
<text x="300" y="480"
font-family="Verdana" font-size="35" text-anchor="middle">
Click on circle to change its size
</text>
</svg>
Build date: 11/21/2012
