script element | SVGScriptElement object

Contains scripts.

Scalable Vector Graphics: Scripting, Section 18.5.1Internet Explorer 9

 

DOM Information

Inheritance Hierarchy

 Node
  Element
   SVGElement
     SVGScriptElement

Members

The SVGScriptElement object has these types of members:

Events

The SVGScriptElement object has these events.

EventDescription
onload

Occurs when the browser has fully parsed the element and all of its descendants.

 

Properties

The SVGScriptElement object has these properties.

PropertyDescription

externalResourcesRequired

Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.

href

Gets an xlink:href attribute of an element.

type

Gets the scripting language for the given script element.

 

Standards information

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.

JavaScript
Copy 

<?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>

See also

Node

 

 

Show: