This page is Not Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



The following code example creates a 200 × 200 pixel viewport and draws a red, 50 px-radius circle that has a black border. If you move the mouse pointer over the rendered circle, the circle doubles its radius; if you move the mouse pointer off the rendered circle, the circle’s current radius reduces by half. The rectangle element is used to outline the boundaries of the viewport.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
  <title>Manipulating the Radius of an SVG Circle</title>
  <script language="javascript" type="text/javascript">
    var red_circle;  // An object that represents the circle.
    var r;           // A variable that represents the circle's radius.

    window.onload = function() {
      red_circle = document.getElementById('redCircle');
      r = parseInt(red_circle.getAttribute("r"));

    function grow() {
      r = 2*r;

    function shrink() {
      r = r/2;
  <svg xmlns="" version="1.1" width="200px" height="200px">
    <circle id="redCircle" cx="100" cy="100" r="50" style="stroke: black; fill: red;" onmouseover="grow()" onmouseout="shrink()"/>
    <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black;"/>
[To make this example work across browsers, save this code example with a .xhtml extension. View live example]


Standards information

See also

Related pages