SVG ход круга против часовой стрелки

Question

Как установить направление хода SVG против часовой стрелки, начиная с 270 градусов, что означает 12 часов.он должен начинаться с 12 часов и, если массив тактов увеличивается, будет увеличиваться против часовой стрелки `

<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

Поверните верхний круг -90deg и используйте stroke-dasharray и stroke-dashoffset на втором круге.

.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>

Использовать CSS @keyframes.На данный момент оно оживляет 360 градусов.Если оно не соответствует вашим требованиям, измените stroke-dasharray, stroke-dashoffset и 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>

Проверьте код в полноэкранном режиме.