There is a progress bar

<svg width=200 height=200> <circle cy=100 cx=100 r=80 fill=transparent stroke="black" stroke-width="20"></circle> <circle cy=100 cx=100 r=80 fill=transparent stroke="orange" stroke-width="20" stroke-dasharray="100, 1000" stroke-dashoffset=0></circle> </svg>

How to make the orange bar begin to overthrow from the center of the circle. I can not understand? what does the stroke-dasharray attribute stroke-dasharray , or rather the values ​​in it

100 is the length of the orange stripe.

1000 - distance between such strips

How is this value measured and how to make the point of reference exactly from above?

Yes, and how can you animate this orange bar?

    2 answers 2

     <svg style="height: 250px;"> <style> .st0{ -moz-transform: rotate(-90deg); /* Для Firefox */ -ms-transform: rotate(-90deg); /* Для IE */ -webkit-transform: rotate(-90deg); /* Для Safari, Chrome, iOS */ -o-transform: rotate(-90deg); /* Для Opera */ transform: rotate(-90deg); } </style> <circle cy=100 cx=100 r=80 fill=transparent stroke="black" stroke-width="20"></circle> <circle class="st0" cy=100 cx=-100 r=80 fill=transparent stroke="orange" stroke-width="20" stroke-dasharray="20%,1000" stroke-dashoffset=0></circle> </svg>

    From the beginning I will explain to the author what a stroke-dasharray :

    Controls the appearance of the dotted stroke. You can set in units of length or as a percentage. If one value is given, the second value is considered equal to the first.

    Details on all the properties described here .

    And this is an example that the author wanted:

     <svg style="height: 250px;"> <style> .st0{ stroke-miterlimit: 5; -moz-transform: rotate(-90deg); /* Для Firefox */ -ms-transform: rotate(-90deg); /* Для IE */ -webkit-transform: rotate(-90deg); /* Для Safari, Chrome, iOS */ -o-transform: rotate(-90deg); /* Для Opera */ transform: rotate(-90deg); } .st0 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 7s linear forwards; } @keyframes dash { from{ stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } </style> <circle cy=100 cx=100 r=80 fill=transparent stroke="black" stroke-width="20"></circle> <circle class="st0" cy=100 cx=-100 r=80 fill=transparent stroke="orange" stroke-width="20" stroke-dasharray="100, 500" stroke-dashoffset=0></circle> </svg>

    • without animation, give an example when 10% of the circle is filled - ruslik
    • What do you mean in units of length - in pixels? - ruslik
    • 2PR, the radius is in pixels in me, so the length is also obtained in px? - ruslik
    • @ruslik Updated the answer. - Raz Galstyan
    • one
      @ruslik answers to all your questions you can find here. svg-art.ru - Raz Galstyan

    In fact, the stroke-dasharray can contain several values 10,20,30... , where even in order will be the lengths of the filled lines and odd - the lengths of the gaps. After the end - everything repeats. All you need is to specify the length of the progress and the maximum length without the length of the progress (to get rid of the repetition), on the substrate must first be 0 (length filled), then the length of the void equal to the length of the progress and again the maximum length without the length of the progress.

     function setProgress(elementId, val) { let el = document.getElementById(elementId); let backProgressEl = el.children[0]; let progressEl = el.children[1]; let maxLength = backProgressEl.getTotalLength(); let progressLength = maxLength * val; backProgressEl.setAttribute('stroke-dasharray', '0,' + progressLength + ',' + (maxLength - progressLength)); progressEl.setAttribute('stroke-dasharray', progressLength + ',' + (maxLength - progressLength)); } setProgress('progressBar', .3); setTimeout(function() { setProgress('progressBar', .8); }, 2000); 
     circle { transition: stroke-dasharray 1s; } 
     <svg id="progressBar" width=200 height=200> <circle cy=100 cx=100 r=80 fill="transparent" stroke="black" stroke-width="20" stroke-dasharray="0,0,1000" transform="rotate(-90 100 100)"></circle> <circle class="progress" cy=100 cx=100 r=80 fill="transparent" stroke="orange" stroke-width="20" stroke-dasharray="0,1000" transform="rotate(-90 100 100)"></circle> </svg>

    • Comments are not intended for extended discussion; conversation moved to chat . - Nick Volynkin ♦