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

More info: mdn | w3c

.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: {gSVGObject} 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: {gSVGObject} 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: {gSVGObject} 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.

• returns: {number} total length circumference

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

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