SVGRoad Ver 2.0

Javascript library to manipulate SVG Path

Features

Setup

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

Initialize the Path

var pathElem = document.getElementById("path"); /*get the path element*/
var SVGRoadInstance = new SVGRoad(pathElem);

Get the Path Length

SVGRoadInstance.getPathLength();//return in px

Set stroke-dashoffset in %

SVGRoadInstance.setStrokeDashoffsetInPercent(40);

stroke-dashoffset :

Get stroke-dashoffset in %

SVGRoadInstance.getStrokeDashoffsetInPercent();

Set stroke-dasharray in %

SVGRoadInstance.setStrokeDasharrayInPercent(50);

SVGRoadInstance.setStrokeDasharrayInPercent(50, 10);

SVGRoadInstance.setStrokeDasharrayInPercent(50, 5, 10, 5,...);//multiple arguments

SVGRoadInstance.setStrokeDasharrayInPercent(40, 5, 10, 5);

stroke-dashoffset :

Animation

SVGRoadInstance.animate().to(finalValue, duration, propertyEvalAndSetter).play();


This is the general animation syntax. Its example is given in next section. Here finalValue can be anything like a number, an array or an object. duration is the duration of animation in milliseconds. propertyEvalAndSetter calculates and sets the properties of the SVG Path based on the percentage of animation completed. It is an object having structure like given below: 

propertyEvalAndSetter = {
    /*
        targetPath is the SVGRoadInstance,
        from and to are your initialValaue and finalValue,
        percentPropertyChange is the percentage of animation completed. 
        It's in fraction from 0.00 to 1.00
    */
    initial: function (targetPath) {
        ...
        /*return the initial value. It can be anything, a number, an array or an object*/
        return initialValaue; 
    },
    update: function (
        targetPath,
        from,
        to,
        percentPropertyChange
    ) {
        ...
        /*set properties of the SVG Path*/
    }
}

Animate stroke-dashoffset

SVGRoadInstance.animate().to(-100,1000,SVGRoad.strokeDashoffsetEvalAndSetter).play();


Here SVGRoad.strokeDashoffsetEvalAndSetter is already defined in the library for animating stroke-dashoffset. Below is its code in case you want make your own animation controlling object. 

SVGRoad.strokeDashoffsetEvalAndSetter = {
    initial: function(targetPath) {
        return targetPath.getStrokeDashoffsetInPercent();
    },
    update: function(targetPath, from, to, percentPropertyChange) {
        var by = to - from;
        targetPath.setStrokeDashoffsetInPercent(by * percentPropertyChange + from);
    }
};