时间戳

首页 > 解决方案 > SVG圆行程逆时针方向

html - SVG圆行程逆时针方向

问题描述

如何从 270 度开始逆时针设置 svg 圆行程方向，这意味着 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>

`

标签： htmlsvg

解决方案

旋转上面的圆圈并在第二个圆圈上-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>

全屏检查代码。

推荐阅读