< svg‎ | elements
Jump to: navigation, search


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


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"
<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="" 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 =;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 100)
        circle.setAttribute("r", currentRadius*2);
        circle.setAttribute("r", currentRadius*0.5);
  <!-- 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



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


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.


This article contains content originally from external sources.

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