ellipse

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

Usually, this element is created with:

const ellipse = parentElement.add('ellipse')

It's possible to create it as a disconnected element with gSVG('ellipse') and attach it to the SVG document with .attachTo().

More info: mdn | w3c

.cx()

ellipse.cx( x )

Set the x-axis position of the ellipse.

• argument: {number|string} x x-axis length or percentage

• returns: {gSVGObject} The original object

const x = element.cx();

Get the cx current value.

• returns: {number|string} current x-axis value

.cy()

ellipse.cy( y )

Set the y-axis position of the ellipse.

• argument: {number|string} y y-axis length or percentage

• returns: {gSVGObject} The original object

const y = element.cy();

Get the cy current value.

• returns: {number|string} current y-axis value

.rx()

ellipse.rx( x )

Set the radius of the ellipse on the x-axis.

• argument: {number|string} x x-axis radius length or percentage

• returns: {gSVGObject} The original object

const x = element.rx();

Get the rx current value.

• returns: {number|string} current x-axis radius value

.ry()

ellipse.ry( y )

Set the radius of the ellipse on the y-axis.

• argument: {number|percentage} y y-axis radius length or percentage

• returns: {gSVGObject} The original object

const ry = element.ry();

Get the ry current value.

• returns: {number|string} current y-axis radius value

.pathLength()

const length = element.pathLength();

Get the total length for the path of this figure, in user units.

• returns: {number} total path length

• Parent elements: a | clipPath | defs | g | marker | mask | pattern | svg | switch | symbol.

• Child elements: animate | animateMotion | animateTransform | desc | metadata | mpath | set | title.