Graphery SVG

# 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 gySVG('ellipse') and attach it to the SVG document with .attachTo().

More info: mdn (opens new window) | w3c (opens new window)

# .cx()

ellipse.cx( x )

Set the x-axis position of the ellipse.

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

  • returns: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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.

← filter →