创建SVG进度圈 [英] Create SVG progress circle

问题描述

有人知道如何在svg中创建一个圆圈"progressbar"吗?我需要指定圆圈的百分比，例如颜色以蛋糕的形式增长.

Anyone know how to create a circle "progressbar" in svg? I need to specify the percentage of the circle, så that a color grows in the shape of a cake.

只要我具有更改其当前状态的属性，该增长就可以是静态的.

The growing can be static as long as I have a attribute to change its current status.

推荐答案

以下是我以前使用的想法.通过对css和animation标签进行一些修改，我们可以为直观的用户体验带来更多效果.

Following is the idea I used to use. With a bit of modification in css and animation tag we can achieve more effects for intuitive user experiences.

---示例代码----

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

希望您正在寻找这种东西. :)

Hope you were looking for something kind of this. :)

这篇关于创建SVG进度圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！