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

SVG Path
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 width="400px" viewbox="-5 0 50 20" fill="none">
	<!--background-path-->
	<path stroke="#ccc" d="m0,10 q10,10 20,0 t20,0" />

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

String shaped SVG

Get total length :
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

setStrokeDasharrayInPercent(50)

Another example :
SVGRoadInstance.setStrokeDasharrayInPercent(25);

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 :
SVGRoadInstance.setStrokeDasharrayInPercent(40, 10);

setStrokeDasharrayInPercent(40, 10)

Another example :
SVGRoadInstance.setStrokeDasharrayInPercent(40, 5, 10, 5);

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 :
SVGRoadInstance.setStrokeDasharrayInPercent(25);
SVGRoadInstance.setStrokeDashoffsetInPercent(25);

setStrokeDasharrayInPercent(25) & setStrokeDashoffsetInPercent(25)

Another exanple :
SVGRoadInstance.setStrokeDasharrayInPercent(50);
SVGRoadInstance.setStrokeDashoffsetInPercent(-25);

setStrokeDasharrayInPercent(50) & setStrokeDashoffsetInPercent(-25)

Whole code with an example :
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <svg width="400px" viewbox="-5 0 50 20" fill="none">
        <!--background-path-->
        <path stroke="#ccc" d="m0,10 q10,10 20,0 t20,0" />

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

    <script>
        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>

setStrokeDasharrayInPercent(40, 5, 10, 5) & setStrokeDashoffsetInPercent(40)

Code is also available here. Useful links :

Leave a Reply

Your email address will not be published. Required fields are marked *