SVG圆行程逆时针方向

Question

How to set svg circle stroke direction anti-clockwise starting at 270 degrees that means 12'O clock. it must be start from 12'o clock and if stroke array increases it will be increase anti-clock wise direction `

 <svg width="100" height="76"> <circle cy="38" cx="50" r="25" style="stroke-dasharray: 158;fill: none; stroke-width: 7; stroke: #5c5c5c; "></circle> <circle cy="38" cx="50" r="25" style="stroke-dasharray: 52.666666666666664 158;fill: none; stroke-width: 7; stroke: #05c189;" transform="rotate(270 50 38)" ></circle> </svg> 

`

Answer 1

Rotate the upper circle -90deg and use stroke-dasharray and stroke-dashoffset on the second circle.

 .demo { margin-top: 20px; display: flex; align-items: center; justify-content: center; } .progress-circle { transform: rotate(-90deg); transform-origin: center center; } .progress__value { stroke-dasharray: 360; stroke-dashoffset: 90; } 

 <div class="demo"> <svg width="120" height="120" viewBox="0 0 120 120"> <g class="progress-circle"> <circle cx="60" cy="60" r="54" fill="none" stroke="#05c189" stroke-width="12" /> <circle class=" progress__value" cx="60" cy="60" r="54" fill="none" stroke="#5c5c5c" stroke-width="12" /> </g> <g> <text x="50%" y="50%" stroke="#5c5c5c" text-anchor="middle" stroke-width="0.5px" dy=".1em" style="font-size: 9px;text-align: center;overflow-wrap: break-word;" >2 Users</text> </g> </svg> </div> 

Use CSS @keyframes . At the moment, it animate 360 degrees. If it does not pass your requirement, change stroke-dasharray , stroke-dashoffset , and to {stroke-dashoffset: 360}

 .demo { margin-top: 20px; display: flex; align-items: center; justify-content: center; } .progress-circle { transform: rotate(-90deg); transform-origin: center center; } .progress__value { stroke-dasharray: 360; stroke-dashoffset: 90; animation: progress 2s infinite; } @keyframes progress { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 360; } } 

 <div class="demo"> <svg width="120" height="120" viewBox="0 0 120 120"> <g class="progress-circle"> <circle cx="60" cy="60" r="54" fill="none" stroke="#05c189" stroke-width="12" /> <circle class=" progress__value" cx="60" cy="60" r="54" fill="none" stroke="#5c5c5c" stroke-width="12" /> </g> <g> <text x="50%" y="50%" stroke="#5c5c5c" text-anchor="middle" stroke-width="0.5px" dy=".1em" style="font-size: 9px;text-align: center;overflow-wrap: break-word;" >2 Users</text> </g> </svg> </div> 

Check the code in full screen.