Graphery SVG

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

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

# .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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} The original object

const pathLength = element.pathLength();

Get the pathLength current value.

← linearGradient →