Drawing Circular Path With Svg And Controlling Its Start / End

Is it possible to draw a circular path like this via svg paths in a way where it is possible to manipulate it to either be 100% (so full circle) or stop at 50%, so top to bottom f

Solution 1:

There are numerous examples of how to do this, here on Stack Overflow, and elsewhere on the web. But they all will use one of two methods to draw the progress bar:

1. Construct a <path> element using one or more path arc ('A') commands
2. Use a <circle> and use a dash pattern to draw part of a circle

The second one is the easier of the two to implement. Hopefully the example below is straightforward to follow:

functionsetProgress(percent)
{
  // Pointer to the <circle> elementvar progress = document.getElementById("progress");
  // Get the length of the circumference of the circlevar circumference = progress.r.baseVal.value * 2 * Math.PI;
  // How long our stroke dash has to be to cover <percent> of the circumference?var dashLength = percent * circumference / 100;
  // Set the "stroke-dasharray" property of the cicle
  progress.style.strokeDasharray = dashLength + ' ' + circumference;
}

setProgress(55);

svg {
  width: 300px
}

#progress {
  fill: lightgrey;
  stroke: orange;
  stroke-width: 10;
}

<svgviewBox="-100 -100 200 200"><circleid="progress"r="80"transform="rotate(-90)"/></svg>

Solution 2:

i think you are approaching this problem in the wrong direction;

you should search on the internet for a circular progress bar, you will find tons of answers.

this is one link: https://kimmobrunfeldt.github.io/progressbar.js/