SVG圆圈逆时针方向

Question

如何设置svg圆弧行程方向逆时针方向从270度开始，这意味着12'O时钟。它必须从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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用CSS @keyframes。目前，它有360度的动画。如果未通过您的要求，请更改stroke-dasharray，stroke-dashoffset和to {stroke-dashoffset: 360}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

全屏检查代码。