Fill Percentage area in a custom Oval SVG image

Question

I would like to fill a custom SVG to a specific percentage. Here is my initial SVG Suppose there is a progress of x% so I would like to fill this SVG like I am not able to figure out how to achieve this. I want it to be dynamic so that I can make it for any percentage. Also,

Accepted Answer

As I’ve commented:You can calculate the length of the path using the getTotalLength() method. This represents 100%.Next you can get the length representing the x% (xperc in the code).Now you can use stroke-dasharray to represent the partial path.You can calculate the position of the last point using the getPointAtLength() method.Please read the comments in my code. //the desired percentegelet xperc = .35;//the total length of the pathlet tl = base.getTotalLength();//the partial length at the given percentage xperclet partial = tl * xperc;//set the stroke-dasharray of the second use elementperc.setAttribute("stroke-dasharray", `${partial} ${tl -partial}`)//calculate the position of the point marking the end positionlet theEnd = base.getPointAtLength(partial);// set the cx and the cy attributes for the end pointend.setAttribute("cx", theEnd.x);end.setAttribute("cy", theEnd.y); circle { stroke: red; fill:white; stroke-width: 6.87634;} OBSERVATION: since your path goes counter clockwise I had to reverse the path to get the desired resultAnd this is an example where I’m using an input type range to change the percent value: let xperc = itr.value;onInput();itr.addEventListener("input", onInput)function onInput() { xperc = itr.value; let tl = base.getTotalLength(); let partial = tl * xperc; perc.setAttribute("stroke-dasharray", `${partial} ${tl - partial}`); let theEnd = base.getPointAtLength(partial); end.setAttribute("cx", theEnd.x); end.setAttribute("cy", theEnd.y);} circle { stroke: red; fill:white; stroke-width: 6.87634;}
And another demo where I’m using javascript to animate it from 0 to 1: //the animation begins at 0let xperc = 0;//get the total length of the pathlet tl = base.getTotalLength();//the request animation idlet rid = null;function Animation() { rid = window.requestAnimationFrame(Animation); // while xperc < 1 increase it's value by 0.001. Else stop the animation if (xperc < 1) { xperc += 0.001; }else{window.cancelAnimationFrame(rid)} //the same as in the first example let partial = tl * xperc; perc.setAttribute("stroke-dasharray", `${partial} ${tl - partial}`); let theEnd = base.getPointAtLength(partial); end.setAttribute("cx", theEnd.x); end.setAttribute("cy", theEnd.y);}Animation(); circle { stroke: red; fill:white; stroke-width: 6.87634;}

Advertisement

Answer