Class: arc

arc

A customizable and animatable SVG arc

new arc(options){arc}

constructs/svg/arc.js, line 31
Initializes a new arc instance.
Name Type Description
options Object Options used to customize the arc
Name Type Default Description
parent * optional SVGElement which to append the arc's path element
id String optional The id of the instance. Auto-generated when not provided
rx Number 50 optional The x-axis radius of the arc
ry Number 50 optional The y-axis radius of the arc
r Number optional Use this option to create a circular, an arc that uses the same value for both rx and ry
cx Number this.rx optional The center of the arc along the x-axis
cy Number this.ry optional The center of the arc along the y-axis
start Number 0 optional The starting point of the arc along its circle in degrees
length Number 0 optional The length of the arc along in degrees
rotation Number 0 optional The rotation of the arc in degrees
sweepFlag Number 0 optional The sweepFlag value used in the svg drawing command to produce the arc
fill String 'transparent' optional The arc's fill color.
stroke String '#000000' optional The arc's stroke color.
strokeWidth String 1 optional The arc's stroke-width.
css Object optional CSS properties to apply to the arc's path element.
attr Object optional Attributes to apply to the arc's path element.
Name Type Default Description
class String 'arc-path' optional Class string applied to the path element.
Returns:
Type Description
arc A new arc instance.

Requires

Members

readonlycalculatedPathString

The svg drawing calculated based on the prperties of this instance

cxNumber

The center of the arc along the x-axis

cyNumber

The center of the arc along the y-axis

dasharray*

The stroke-dasharray of the path

dashoffset*

The stroke-dashoffset of the path

readonlyelSVGElement

The path element associated with this instance

endNumber

The ending point of the arc along its circle in degrees

fillString

The arc's fill color

readonlyidString

The id of this instance's path element

readonlylargeArcFlagNumber

The largeArcFlag value used by the svg drawing command to produce the arc

lengthNumber

The length of the arc in degrees

readonlyparentSVGElement

The parent of the path element

rNumber

The radius of the arc

rotationNumber

The rotation of the arc in degrees

rxNumber

The x-axis radius of the arc

ryNumber

The y-axis radius of the arc

sliceString

Control how much of the path's stroke is drawn. Space-delimited values define a slice, ie '10 30'. A single value asserts 0 as the starting value. Accepts percentages for relative values

startNumber

The starting point of the arc along its circle in degrees

strokeString

The arc's stroke color

strokeWidthNumber

The arc's stroke width

sweepFlagNumber

The sweepFlag value used by the svg drawing command to produce the arc

Methods

staticarc.calculatePath(cx, cy, rx, ry, start, length, sweepFlag){String}

constructs/svg/arc.js, line 452
Returns the svg drawing command to produce the specified
Name Type Description
cx Number The center of the arc along the x-axis
cy Number The center of the arc along the y-axis
rx Number The x-axis radius of the arc
ry Number The y-axis radius of the arc
start Number The starting point of the arc along its circle in degrees
length Number The length of the arc in degrees
sweepFlag Number The sweepFlag value used in the calculated svg drawing command
Returns:
Type Description
String The svg drawing command

staticarc.flatten(value){Number}

constructs/svg/arc.js, line 486
The provided value flattened in the range of 0-360
Name Type Description
value Number The value to flatten
Returns:
Type Description
Number The flattened value

staticarc.getElInstance(el){arc}

constructs/svg/arc.js, line 511
returns the arc instance associated with the provided element's id attribute
Name Type Description
el Element The element with the lookup id
Returns:
Type Description
arc The associate arc, if it exists

staticarc.getInstance(id){arc}

constructs/svg/arc.js, line 499
returns the arc instance associated with the id
Name Type Description
id String The lookup id
Returns:
Type Description
arc The associate arc, if it exists

calculatePath(cx, cy, rx, ry, start, length, sweepFlag){String}

constructs/svg/arc.js, line 413
Returns the svg drawing command to produce the specified
Name Type Description
cx Number The center of the arc along the x-axis
cy Number The center of the arc along the y-axis
rx Number The x-axis radius of the arc
ry Number The y-axis radius of the arc
start Number The starting point of the arc along its circle in degrees
length Number The length of the arc in degrees
sweepFlag Number The sweepFlag value used in the calculated svg drawing command
Returns:
Type Description
String The svg drawing command