Basic SVG Path Manipulation Library – SVGRoad

SVGRoad is a really small SVG manipulation library which enables you to easily and quickly set the stroke-dasharray and stroke-dashoffset attributes in percentage.

How to use it:

Download and import the SVGRoad library into the document.

<script src="SVGRoad.js"></script>

Initialize the SVGRoad and specify the SVG path element.

var el = document.getElementById("path");
var Instance = new SVGRoad(el);

Set the stroke-dasharray.

Instance.setStrokeDasharrayInPercent(50); 
Instance.setStrokeDasharrayInPercent(50, 10);
Instance.setStrokeDasharrayInPercent(20, 5, 10, 5);
...

Set/get the stroke-dashoffset.

Instance.getStrokeDashoffsetInPercent();
Instance.setStrokeDashoffsetInPercent(50);

Get the SVG length.

Instance.getPathLength();