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>
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
Another example :
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 :
SVGRoadInstance.setStrokeDasharrayInPercent(40, 10);
Another example :
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 :
SVGRoadInstance.setStrokeDasharrayInPercent(25); SVGRoadInstance.setStrokeDashoffsetInPercent(25);
Another exanple :
SVGRoadInstance.setStrokeDasharrayInPercent(50); SVGRoadInstance.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>
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
