SVG 1.1 (Second Edition) Ä�ā‚¬ā€� 16 August 2011Top Ä�ā€¹ā€¦ Contents Ä�ā€¹ā€¦ Previous Ä�ā€¹ā€¦ Next Ä�ā€¹ā€¦ Elements Ä�ā€¹ā€¦ Attributes Ä�ā€¹ā€¦ Properties

9 Basic Shapes

Contents

9.1 Introduction

SVG contains the following set of basic shape elements:

Mathematically, these shape elements are equivalent to a Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element that would construct the same shape. The basic shapes may be stroked, filled and used as clip paths. All of the properties available for Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ elements also apply to the basic shapes.

9.2 The Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element defines a rectangle which is axis-aligned with the current user coordinate system. Rounded rectangles can be achieved by setting appropriate values for attributes Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢.

Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢
Categories:
Basic shape element, graphics element, shape element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

x = "<coordinate>"
The x-axis coordinate of the side of the rectangle which has the smaller x-axis coordinate value in the current user coordinate system.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
y = "<coordinate>"
The y-axis coordinate of the side of the rectangle which has the smaller y-axis coordinate value in the current user coordinate system.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
width = "<length>"
The width of the rectangle.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
height = "<length>"
The height of the rectangle.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
rx = "<length>"
For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle.
A negative value is an error (see Error processing).
See the notes below about what happens if the attribute is not specified.
Animatable: yes.
ry = "<length>"
For rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle.
A negative value is an error (see Error processing).
See the notes below about what happens if the attribute is not specified.
Animatable: yes.

The values used for the x- and y-axis rounded corner radii are determined implicitly if the Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ attributes (or both) are not specified, or are specified but with invalid values. The values are also subject to clamping so that the lengths of the straight segments of the rectangle are never negative. The effective values for Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ are determined by following these steps in order:

  1. Let rx and ry be length values.
  2. If neither Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ nor Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ are properly specified, then set both rx and ry to 0. (This will result in square corners.)
  3. Otherwise, if a properly specified value is provided for Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢, but not for Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢, then set both rx and ry to the value of Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢.
  4. Otherwise, if a properly specified value is provided for Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢, but not for Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢, then set both rx and ry to the value of Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢.
  5. Otherwise, both Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ were specified properly. Set rx to the value of Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ and ry to the value of Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢.
  6. If rx is greater than half of Ä�ā‚¬ļæ½widthÄ�ā‚¬ā„¢, then set rx to half of Ä�ā‚¬ļæ½widthÄ�ā‚¬ā„¢.
  7. If ry is greater than half of Ä�ā‚¬ļæ½heightÄ�ā‚¬ā„¢, then set ry to half of Ä�ā‚¬ļæ½heightÄ�ā‚¬ā„¢.
  8. The effective values of Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ are rx and ry, respectively.

Mathematically, a Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element can be mapped to an equivalent Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to Units.)

Example rect01 shows a rectangle with sharp corners. The Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element is filled with yellow and stroked with navy.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example rect01 - rectangle with sharp corners</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <rect x="400" y="100" width="400" height="200"
        fill="yellow" stroke="navy" stroke-width="10"  />
</svg>
Example rect01
Example rect01 Ä�ā‚¬ā€¯ rectangle with sharp corners

View this example as SVG (SVG-enabled browsers only)

Example rect02 shows two rounded rectangles. The Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ specifies how to round the corners of the rectangles. Note that since no value has been specified for the Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ attribute, it will be assigned the same value as the Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ attribute.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example rect02 - rounded rectangles</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <rect x="100" y="100" width="400" height="200" rx="50"
        fill="green" />

  <g transform="translate(700 210) rotate(-30)">
    <rect x="0" y="0" width="400" height="200" rx="50"
          fill="none" stroke="purple" stroke-width="30" />
  </g>
</svg>
Example rect02
Example rect02 Ä�ā‚¬ā€¯ rounded rectangles expressed in user coordinates

View this example as SVG (SVG-enabled browsers only)

9.3 The Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element defines a circle based on a center point and a radius.

Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢
Categories:
Basic shape element, graphics element, shape element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

cx = "<coordinate>"
The x-axis coordinate of the center of the circle.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
cy = "<coordinate>"
The y-axis coordinate of the center of the circle.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
r = "<length>"
The radius of the circle.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.

The arc of a Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.

Example circle01 consists of a Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element that is filled with red and stroked with blue.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example circle01 - circle filled with red and stroked with blue</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />
</svg>
Example circle01
Example circle01 Ä�ā‚¬ā€¯ circle filled with red and stroked with blue

View this example as SVG (SVG-enabled browsers only)

9.4 The Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.

Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢
Categories:
Basic shape element, graphics element, shape element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

cx = "<coordinate>"
The x-axis coordinate of the center of the ellipse.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
cy = "<coordinate>"
The y-axis coordinate of the center of the ellipse.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
rx = "<length>"
The x-axis radius of the ellipse.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
ry = "<length>"
The y-axis radius of the ellipse.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.

The arc of an Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.

Example ellipse01 below specifies the coordinates of the two ellipses in the user coordinate system established by the Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute on the Ä�ā‚¬ļæ½svgÄ�ā‚¬ā„¢ element and the Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ attribute on the Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ elements. Both ellipses use the default values of zero for the Ä�ā‚¬ļæ½cxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½cyÄ�ā‚¬ā„¢ attributes (the center of the ellipse). The second ellipse is rotated.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example ellipse01 - examples of ellipses</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g transform="translate(300 200)">
    <ellipse rx="250" ry="100"
          fill="red"  />
  </g>

  <ellipse transform="translate(900 200) rotate(-30)" 
        rx="250" ry="100"
        fill="none" stroke="blue" stroke-width="20"  />

</svg>
Example ellipse01
Example ellipse01 Ä�ā‚¬ā€¯ ellipses expressed in user coordinates

View this example as SVG (SVG-enabled browsers only)

9.5 The Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element defines a line segment that starts at one point and ends at another.

Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢
Categories:
Basic shape element, graphics element, shape element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

x1 = "<coordinate>"
The x-axis coordinate of the start of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
y1 = "<coordinate>"
The y-axis coordinate of the start of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
x2 = "<coordinate>"
The x-axis coordinate of the end of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
y2 = "<coordinate>"
The y-axis coordinate of the end of the line.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.

Mathematically, a Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element can be mapped to an equivalent Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to Units.)

Because Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ elements are single lines and thus are geometrically one-dimensional, they have no interior; thus, Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ elements are never filled (see the Ä�ā‚¬ļæ½fillÄ�ā‚¬ā„¢ property).

Example line01 below specifies the coordinates of the five lines in the user coordinate system established by the Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute on the Ä�ā‚¬ļæ½svgÄ�ā‚¬ā„¢ element. The lines have different thicknesses.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example line01 - lines expressed in user coordinates</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g stroke="green" >
    <line x1="100" y1="300" x2="300" y2="100"
            stroke-width="5"  />
    <line x1="300" y1="300" x2="500" y2="100"
            stroke-width="10"  />
    <line x1="500" y1="300" x2="700" y2="100"
            stroke-width="15"  />
    <line x1="700" y1="300" x2="900" y2="100"
            stroke-width="20"  />
    <line x1="900" y1="300" x2="1100" y2="100"
            stroke-width="25"  />
  </g>
</svg>
Example line01
Example line01 Ä�ā‚¬ā€¯ lines expressed in user coordinates

View this example as SVG (SVG-enabled browsers only)

9.6 The Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ element defines a set of connected straight line segments. Typically, Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ elements define open shapes.

Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢
Categories:
Basic shape element, graphics element, shape element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

points = "<list-of-points>"
The points that make up the polyline. All coordinate values are in the user coordinate system.
Animatable: yes.

If an odd number of coordinates is provided, then the element is in error, with the same user agent behavior as occurs with an incorrectly specified Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element.

Mathematically, a Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ element can be mapped to an equivalent Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element as follows:

Example polyline01 below specifies a polyline in the user coordinate system established by the Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute on the Ä�ā‚¬ļæ½svgÄ�ā‚¬ā„¢ element.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example polyline01 - increasingly larger bars</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polyline fill="none" stroke="blue" stroke-width="10" 
            points="50,375
                    150,375 150,325 250,325 250,375
                    350,375 350,250 450,250 450,375
                    550,375 550,175 650,175 650,375
                    750,375 750,100 850,100 850,375
                    950,375 950,25 1050,25 1050,375
                    1150,375" />
</svg>
Example polyline01
Example polyline01 Ä�ā‚¬ā€¯ increasingly larger bars

View this example as SVG (SVG-enabled browsers only)

9.7 The Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ element defines a closed shape consisting of a set of connected straight line segments.

Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢
Categories:
Basic shape element, graphics element, shape element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

points = "<list-of-points>"
The points that make up the polygon. All coordinate values are in the user coordinate system.
Animatable: yes.

If an odd number of coordinates is provided, then the element is in error, with the same user agent behavior as occurs with an incorrectly specified Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element.

Mathematically, a Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ element can be mapped to an equivalent Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element as follows:

Example polygon01 below specifies two polygons (a star and a hexagon) in the user coordinate system established by the Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute on the Ä�ā‚¬ļæ½svgÄ�ā‚¬ā„¢ element.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example polygon01 - star and hexagon</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polygon fill="red" stroke="blue" stroke-width="10" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
  <polygon fill="lime" stroke="blue" stroke-width="10" 
            points="850,75  958,137.5 958,262.5
                    850,325 742,262.6 742,137.5" />
</svg>
Example polygon01
Example polygon01 Ä�ā‚¬ā€¯ star and hexagon

View this example as SVG (SVG-enabled browsers only)

9.7.1 The grammar for points specifications in Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ elements

The following is the Extended Backus-Naur Form (EBNF) for points specifications in Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ elements. The following notation is used:

list-of-points:
    wsp* coordinate-pairs? wsp*
coordinate-pairs:
    coordinate-pair
    | coordinate-pair comma-wsp coordinate-pairs
coordinate-pair:
    coordinate comma-wsp coordinate
    | coordinate negative-coordinate
coordinate:
    number
number:
    sign? integer-constant
    | sign? floating-point-constant
negative-coordinate:
    "-" integer-constant
    | "-" floating-point-constant
comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","
integer-constant:
    digit-sequence
floating-point-constant:
    fractional-constant exponent?
    | digit-sequence exponent
fractional-constant:
    digit-sequence? "." digit-sequence
    | digit-sequence "."
exponent:
    ( "e" | "E" ) sign? digit-sequence
sign:
    "+" | "-"
digit-sequence:
    digit
    | digit digit-sequence
digit:
    "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
    (#x20 | #x9 | #xD | #xA)+

9.8 DOM interfaces

9.8.1 Interface SVGRectElement

The SVGRectElement interface corresponds to the Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element. 
interface SVGRectElement : SVGElement,
                           SVGTests,
                           SVGLangSpace,
                           SVGExternalResourcesRequired,
                           SVGStylable,
                           SVGTransformable {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedLength rx;
  readonly attribute SVGAnimatedLength ry;
};
Attributes:
x (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½xÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element.
y (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½yÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element.
width (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½widthÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element.
height (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½heightÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element.
rx (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element.
ry (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ element.

9.8.2 Interface SVGCircleElement

The SVGCircleElement interface corresponds to the Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element. 
interface SVGCircleElement : SVGElement,
                             SVGTests,
                             SVGLangSpace,
                             SVGExternalResourcesRequired,
                             SVGStylable,
                             SVGTransformable {
  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength r;
};
Attributes:
cx (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½cxÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element.
cy (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½cyÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element.
r (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½rÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢ element.

9.8.3 Interface SVGEllipseElement

The SVGEllipseElement interface corresponds to the Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element. 
interface SVGEllipseElement : SVGElement,
                              SVGTests,
                              SVGLangSpace,
                              SVGExternalResourcesRequired,
                              SVGStylable,
                              SVGTransformable {
  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength rx;
  readonly attribute SVGAnimatedLength ry;
};
Attributes:
cx (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½cxÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element.
cy (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½cyÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element.
rx (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½rxÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element.
ry (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½ryÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢ element.

9.8.4 Interface SVGLineElement

The SVGLineElement interface corresponds to the Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element. 
interface SVGLineElement : SVGElement,
                           SVGTests,
                           SVGLangSpace,
                           SVGExternalResourcesRequired,
                           SVGStylable,
                           SVGTransformable {
  readonly attribute SVGAnimatedLength x1;
  readonly attribute SVGAnimatedLength y1;
  readonly attribute SVGAnimatedLength x2;
  readonly attribute SVGAnimatedLength y2;
};
Attributes:
x1 (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½x1Ä�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element.
y1 (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½y1Ä�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element.
x2 (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½x2Ä�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element.
y2 (readonly SVGAnimatedLength)
Corresponds to attribute Ä�ā‚¬ļæ½y2Ä�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ element.

9.8.5 Interface SVGAnimatedPoints

The SVGAnimatedPoints interface supports elements which have a Ä�ā‚¬ļæ½pointsÄ�ā‚¬ā„¢ attribute which holds a list of coordinate values and which support the ability to animate that attribute.

Additionally, the Ä�ā‚¬ļæ½pointsÄ�ā‚¬ā„¢ attribute on the original element accessed via the XML DOM (e.g., using the getAttribute() method call) will reflect any changes made to points.

interface SVGAnimatedPoints {
  readonly attribute SVGPointList points;
  readonly attribute SVGPointList animatedPoints;
};
Attributes:
points (readonly SVGPointList)
Provides access to the base (i.e., static) contents of the Ä�ā‚¬ļæ½pointsÄ�ā‚¬ā„¢ attribute.
animatedPoints (readonly SVGPointList)
Provides access to the current animated contents of the Ä�ā‚¬ļæ½pointsÄ�ā‚¬ā„¢ attribute. If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as points.

9.8.6 Interface SVGPolylineElement

The SVGPolylineElement interface corresponds to the Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ element. 
interface SVGPolylineElement : SVGElement,
                               SVGTests,
                               SVGLangSpace,
                               SVGExternalResourcesRequired,
                               SVGStylable,
                               SVGTransformable,
                               SVGAnimatedPoints {
};

9.8.7 Interface SVGPolygonElement

The SVGPolygonElement interface corresponds to the Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ element. 
interface SVGPolygonElement : SVGElement,
                              SVGTests,
                              SVGLangSpace,
                              SVGExternalResourcesRequired,
                              SVGStylable,
                              SVGTransformable,
                              SVGAnimatedPoints {
};
SVG 1.1 (Second Edition) Ä�ā‚¬ā€� 16 August 2011Top Ä�ā€¹ā€¦ Contents Ä�ā€¹ā€¦ Previous Ä�ā€¹ā€¦ Next Ä�ā€¹ā€¦ Elements Ä�ā€¹ā€¦ Attributes Ä�ā€¹ā€¦ Properties