svg - 创建SVG进度圈

Question

任何人都知道如何在 svg 中创建一个圆圈“进度条”？我需要指定圆圈的百分比，så 颜色以蛋糕的形状生长。

只要我有一个属性来改变它的当前状态，增长就可以是静态的。

Answer 1

以下是我曾经使用的想法。在 css 稍作修改和 animation标签我们可以为直观的用户体验实现更多效果。

---示例代码----

.over{
  -webkit-animation: rotator 1.5s ease-in-out infinite;
  stroke-dasharray: 107,38;
}
.bag{
  position: absolute;
}
@-webkit-keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="container">
  <svg class="bag" height="100" width="100">
    <circle  cx="50" cy="50" r="40" stroke="#F8BBD0" stroke-width="3" fill="none">
    </circle>
  </svg>
  <svg class="over" height="100" width="100">
    <circle  cx="50" cy="50" r="40" stroke="#E91E63" stroke-width="3" fill="none" >
      <animate attributeType="CSS" attributeName="stroke-dasharray" from="1,254" to="247,56" dur="5s" repeatCount="indefinite" />
    </circle>
  </svg>
</div>

希望你正在寻找这样的东西。 :)