Graphery SVG

# circle

The circle SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.

Usually, this element is created with:

const circle = parentElement.add('circle')

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

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

# .cx()

circle.cx( x )

Set the x-axis coordinate of the center of the circle.

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

  • returns: {gySVGObject} The original object

const cx = element.cx();

Get the cx current value.

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

# .cy()

circle.cy( y )

Set the y-axis coordinate of the center of the circle.

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

  • returns: {gySVGObject} The original object

const cy = element.cy();

Get the cy current value.

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

# .r()

circle.r( radius )

Set the radius (r attribute) of the circle. A value lower or equal to zero disables rendering of the circle.

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

  • returns: {gySVGObject} The original object

const radius = element.r();

Get the current radius value.

  • returns: {number|string} current radius value

# .pathLength()

const length = element.pathLength();

Get the total length for the circle's circumference, in user units.

← clipPath →