svgLine

svgLine

A plugin-less way to manipulate SVGPolylineElement or SVGPolygonElement.

Constructor

new svgLine(options)

Source:
Parameters:
Name Type Description
options svglOptions

svglOptions

Members

active :number

Source:

Last active trigger point

Type:
  • number

height :number

Source:

SVG viewbox height

Type:
  • number

length :number

Source:

Path length

Type:
  • number

options :svglOptions

Source:

svgLine Options svglOptions

Type:

ratios :Array.<number>

Source:

Segments ratio

Type:
  • Array.<number>

Methods

(static) calculateSectionLength(path, start, end) → {number}

Source:

Calculates length starting from start point up to end point. sectionLength is the sum of all the segment lengths inside the section.

Parameters:
Name Type Description
path SVGPolylineElement | SVGPolygonElement
start number

Starting point index

end number

End point index

Returns:
  • Section length
Type
number

(static) distance(point1, point2)

Source:

Calculate length from point1 to point2

Parameters:
Name Type Description
point1 SVGPoint
point2 SVGPoint

(static) dX(point1, point2)

Source:

Calculate horizontal difference between points

Parameters:
Name Type Description
point1 SVGPoint
point2 SVGPoint

(static) dY(point1, point2)

Source:

Calculate vertical difference between points

Parameters:
Name Type Description
point1 SVGPoint
point2 SVGPoint

(static) getTotalLength(path) → {number}

Source:

Calculates total length.

Parameters:
Name Type Description
path SVGPolylineElement | SVGPolygonElement
Returns:
  • Total length of path
Type
number

drawPath(percent) → {number}

Source:

Draws the path by changing the strokeDashoffset of it.

Parameters:
Name Type Description
percent number

decimal from 0 t0 1

Returns:
  • New strokeDashoffset length.
Type
number

getRatios() → {Array.<number>}

Source:

Gets ratio of trigger points position relative to viewport height.

Returns:
Type
Array.<number>

reCheck() → {number}

Source:

Method use to calculate the last active trigger point. An active trigger point is a point by which the stroke has already passed.

Returns:
  • active index
Type
number

setRatios(ratios)

Source:

Redraws paths based on ratios provided.

Parameters:
Name Type Description
ratios Array.<number>