script

< svg‎ | elements
Jump to: navigation, search

script

This article is In Progress.



Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.


Overview Table

DOM Interface SVGElement


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
?
Unknown
9.0
Yes
9.0
Yes
3.0.4
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
3.0
Yes
1.0
Yes
?
none
?
Yes
3.0.4
Yes

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>

Notes

Remarks

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent 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.

Standards information

Members

The SVGScriptElement object has these events:

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

The SVGScriptElement object has these properties:

  • 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.

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]