Drawing circular path with svg and controlling its start / end

Question

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 forming half a circle. Note 100% and 50% are examples used, in real world any percentage from 0 to 100 should be valid.

After some research I found that following approach seems to be how you draw a circle https://stackoverflow.com/a/8193760/911930 but I don't see any way to implement this where I can draw / stop path at a given percentage.

score 1 · Accepted Answer · answered Jul 23 '17 at 07:19

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:

Construct a <path> element using one or more path arc ('A') commands
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:

function setProgress(percent)
{
  // Pointer to the <circle> element
  var progress = document.getElementById("progress");
  // Get the length of the circumference of the circle
  var 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;
}

<svg viewBox="-100 -100 200 200">
  <circle id="progress" r="80" transform="rotate(-90)"/>
</svg>

score -3 · Answer 2 · answered Jul 22 '17 at 12:53

-3

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/

answered Jul 22 '17 at 12:53

Bashir Abdelwahed

474
4
17

I actually stumbled upon this one before and used it in web based project, reason I am asking on how to do this with pure svg (mayb some js) is so I can use https://github.com/react-native-community/react-native-svg for my react native project. This library is built with same api as svg itself, hence my question – Ilja Jul 22 '17 at 13:13

Drawing circular path with svg and controlling its start / end

2 Answers2

Linked