Index

The <ellipse> SVG element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.

[!NOTE] Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the {{SVGAttr("transform")}} attribute.

Usage context

{{svginfo}}

Attributes

• {{SVGAttr("cx")}}
  • : The x position of the center of the ellipse. Value type: <length> | <percentage>; Default value: 0; Animatable: yes
• {{SVGAttr("cy")}}
  • : The y position of the center of the ellipse. Value type: <length> | <percentage>; Default value: 0; Animatable: yes
• {{SVGAttr("rx")}}
  • : The radius of the ellipse on the x axis. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes
• {{SVGAttr("ry")}}
  • : The radius of the ellipse on the y axis. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes
• {{SVGAttr("pathLength")}}
  • : This attribute lets specify the total length for the path, in user units. Value type: <number>; Default value: none; Animatable: yes

[!NOTE] Starting with SVG2 cx, cy, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

{{EmbedLiveSample('Example', 100, '100%')}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Other SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}