
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