line

The line element is an SVG basic shape used to create a line connecting two points.

Usually, this element is created with:

const line = parentElement.add('line')

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

More info: mdn | w3c

.x1()

line.x1( x1 )

Set defines the x-axis coordinate of the line starting point.

• argument: {number|string} x1 The x1 value (length or percentage)

• returns: {gSVGObject} The original object

const x1 = element.x1();

Get the x1 current value.

• returns: {number|string}

.x2()

line.x2( x2 )

Set defines the x-axis coordinate of the line ending point.

• argument: {number|string} x2 The x2 value (length or percentage)

• returns: {gSVGObject} The original object

const x2 = element.x2();

Get the x2 current value.

• returns: {number|string}

.y1()

line.y1( y1 )

Set defines the y-axis coordinate of the line starting point.

• argument: {number|string} y1 The y1 value (length or percentage)

• returns: {gSVGObject} The original object

const y1 = element.y1();

Get the y1 current value.

• returns: {number|string}

.y2()

line.y2( y2 )

Set defines the y-axis coordinate of the line ending point.

• argument: {number|string} y2 The y2 value (length or percentage)

• returns: {gSVGObject} The original object

const y2 = element.y2();

Get the y2 current value.

• returns: {number|string}

.pathLength()

line.pathLength( length )

Set defines the total path length in user units.

• argument: {number|string} length The path length value

• returns: {gSVGObject} The original object

const pathLength = element.pathLength();

Get the pathLength current value.

• returns: {number|string}

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

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