(Part 1 : Set stroke-dasharray & stroke-dashoffset in Percentage) - SVG Path

zFunx SVG Path March 31, 2018 | 0

Set stroke-dasharray & stroke-dashoffset of SVG Path in % using JavaScript.

Get the total length of the Path

First create a SVG on which we will do experiments :

</svg>

Get total length :

1 2	var pathElem = document.getElementById("path"); var totalLen = pathElem.getTotalLength();//get total length

You can check the length with alert(totalLen);. We will do same thing using class (using function) and use this class in later sections :

function SVGRoad(elem) {

this.pathLength = elem.getTotalLength();

}

var pathElem = document.getElementById("path");

var SVGRoadInstance = new SVGRoad(pathElem);

Now we can check length with alert(SVGRoadInstance.pathLength);.

Set stroke-dasharray in % with single value

Define a method for setting stroke-dasharray :

function SVGRoad(elem) {

this.pathLength = elem.getTotalLength();

//define this

this.setStrokeDasharrayInPercent = function (strokeDasharray) {

elem.style.strokeDasharray = (strokeDasharray / 100) * this.pathLength;

}

Now set the stroke-dasharray

var pathElem = document.getElementById("path");

var SVGRoadInstance = new SVGRoad(pathElem);

SVGRoadInstance.setStrokeDasharrayInPercent(50);//set stroke-dasharray

Another example :

1	SVGRoadInstance.setStrokeDasharrayInPercent(25);

Set stroke-dasharray in % with multiple values

Modify our method for setting stroke-dasharray :

this.setStrokeDasharrayInPercent = function () {

var strokeDasharray = "";

for (i = 0; i < arguments.length; i++) {

strokeDasharray += (arguments[i] / 100) * this.pathLength + " ";

}

elem.style.strokeDasharray = strokeDasharray;

}

Set stroke-dasharray :

1	SVGRoadInstance.setStrokeDasharrayInPercent(40, 10);

Another example :

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

Set stroke-dashoffset in %

Add method for setting stroke-dashoffset :

function SVGRoad(elem) {

/*...*/

this.setStrokeDashoffsetInPercent = function (strokeDashoffset) {

elem.style.strokeDashoffset = (strokeDashoffset / 100) * this.pathLength;

}

Set stroke-dashoffset :

1 2	SVGRoadInstance.setStrokeDasharrayInPercent(25); SVGRoadInstance.setStrokeDashoffsetInPercent(25);

Another exanple :

1 2	SVGRoadInstance.setStrokeDasharrayInPercent(50); SVGRoadInstance.setStrokeDashoffsetInPercent(-25);

Whole code with an example :

<!DOCTYPE html>
<html lang="en">

<path stroke-width="2" stroke="LimeGreen" id="path" d="m0,10 q10,10 20,0 t20,0" />
    </svg>

this.setStrokeDashoffsetInPercent = function (strokeDashoffset) {
                elem.style.strokeDashoffset = (strokeDashoffset / 100) * this.pathLength;
            }
        }

var pathElem = document.getElementById("path");
        var SVGRoadInstance = new SVGRoad(pathElem);
        SVGRoadInstance.setStrokeDasharrayInPercent(40, 5, 10, 5);
        SVGRoadInstance.setStrokeDashoffsetInPercent(40);
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

</svg>

function SVGRoad(elem) {

this.pathLength = elem.getTotalLength();

this.setStrokeDasharrayInPercent = function () {

var strokeDasharray = "";

for (i = 0; i < arguments.length; i++) {

strokeDasharray += (arguments[i] / 100) * this.pathLength + " ";

}

elem.style.strokeDasharray = strokeDasharray;

}

this.setStrokeDashoffsetInPercent = function (strokeDashoffset) {

elem.style.strokeDashoffset = (strokeDashoffset / 100) * this.pathLength;

}

var pathElem = document.getElementById("path");

var SVGRoadInstance = new SVGRoad(pathElem);

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

SVGRoadInstance.setStrokeDashoffsetInPercent(40);

</script>

</body>

</html>

Code is also available here. Useful links :

How SVG Line Animation Works
Learn about how to pass multiple arguments to the function by clicking here and scroll down to The Arguments Object
SVGRoad Library