Skip to main content
r attribute | r property

Gets or sets the radius of a circle.

Scalable Vector Graphics: Basic Shapes, Section 9.8.2 Internet Explorer 9



<element r="p" ... >


p = object.r


Property values

Type: Object

The circle's radius.

Standards information


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.

To make this example work across browsers, save this code example with a .xhtml extension.

<?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;"/>

See also