ellipse element | SVGEllipseElement object

Defines an ellipse that is based on a given center point and two radius values.

Scalable Vector Graphics: Basic Shapes, Section 9.8.3

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGEllipseElement

Members

The SVGEllipseElement object has these types of members:

Events
Methods
Properties

Events

The SVGEllipseElement object has these events.

Event	Description
onload	Occurs when the browser has fully parsed the element and all of its descendants.

Methods

The SVGEllipseElement object has these methods.

Method	Description
getBBox	Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
getCTM	Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
getScreenCTM	Gets the transformation matrix from the current user units to the screen coordinate system.
getTransformToElement	Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
hasExtension	Determines if the specified extension is supported.

Properties

The SVGEllipseElement object has these properties.

Property	Description
className	Gets the names of the classes that are assigned to this object.
clipPath	Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
cx	Gets or sets the x-coordinate of the center of a circle or an ellipse.
cy	Gets or sets the y-coordinate of the center of a circle or an ellipse.
externalResourcesRequired	Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
farthestViewportElement	Gets a value that represents the farthest ancestor svg element.
fill	Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.
fillOpacity	Sets or retrieves a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
fillRule	Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
focusable	Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
mask	Sets or retrieves a value that indicates a SVG mask.
nearestViewportElement	Gets a value that indicates which element established the current viewport.
ownerSVGElement	Gets the nearest ancestor svg element.
pointerEvents	Sets or retrieves a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG. Starting with IE11, this property also has basic support for HTML elements (see "Remarks" section).
requiredExtensions	Gets a white space-delimited list of required language extensions.
requiredFeatures	Gets or sets a white space-delimited list of feature strings.
rx	Gets or sets the x-axis radius of an ellipse.
ry	Gets or sets the y-axis radius of an ellipse.
stroke	Sets or retrieves a value that indicates the color to paint along the outline of a given graphical element.
strokeDasharray	Sets or retrieves one or more values that indicate the pattern of dashes and gaps used to stroke paths.
strokeDashoffset	Sets or retrieves a value that specifies the distance into the dash pattern to start the dash.
strokeLinecap	Sets or retrieves a value that specifies the shape to be used at the end of open subpaths when they are stroked.
strokeLinejoin	Sets or retrieves a value that specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
strokeMiterlimit	Sets or retrieves a value that indicates the limit on the ratio of the length of miter joins (as specified in the strokeLinejoin property).
strokeOpacity	Sets or retrieves a value that specifies the opacity of the painting operation that is used to stroke the current object.
strokeWidth	Sets or retrieves a value that specifies the width of the stroke on the current object.
style	Gets a style object.
systemLanguage	Gets or sets a comma-separated list of language names.
transform	Gets the value of a transform attribute.
viewportElement	Gets the element that established the current viewport.
xmlbase	Gets or sets the `base` attribute on the element.
xmllang	Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
xmlspace	Gets or sets a value that indicates whether white space is preserved in character data.

Standards information

Scalable Vector Graphics: Basic Shapes, Section 9.8.3

Remarks

Note In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherit core HTML attributes, properties, events, methods, and styles.

Examples

In the following code example, the ellipse element is used to draw a skyblue-colored circle inside an inline SVG element. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see a skyblue ellipse.

It should look like this:

JavaScript



    <!DOCTYPE HTML>
    <html>
			
      <head>
      </head>
			
      <body>
        <svg width="400" height="400">
          <ellipse cx="150" cy="100" rx="100" ry="75" fill="skyblue" />
        </svg>
      </body>
    </html>