创建SVG进度圈

Question

有谁知道如何在svg中创建一个"progressbar"圈？我需要指定圆的百分比,颜色以蛋糕的形状增长.

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

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>

希望你能找到一些这样的东西.:)

Answer 2

谢谢,boldewyn.

为了回答我自己的问题,我找到了以下解决方案:

可以在模板中使用以下路径:

<path id="progress" fill="none" stroke="#ffffff" d="" stroke-width="10"/>

并使用Raphael js-framework中的此函数来更新x和y.如果total为100,则value是进度的百分比:

function updateState (value, total, R) {
    var center;
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = 300 + R * Math.cos(a),
        y = 300 - R * Math.sin(a),
        path;
    if (total == value) {
        path = "M"+ 300 +","+ (300 - R) +" A"+ R+","+ R+","+ 0+","+ 1+","+ 1+","+ 299.99+","+ 300 - R;
    } else {
        if(alpha > 180) {
            center = 1;
        } else {
            center = 0;
        }
        path = "M"+ 300+","+ (300 - R) +" A"+ R+","+ R+","+ 0+"," + center +","+ 1+","+ x+","+ y;
    }
    return path;
}

返回的路径变量是path元素上d属性的值.

如果您的浏览器支持SVG Full以及路径元素的Elliptical Arc命令,则此方法非常有效.在我的情况下,我只有SVG微小,所以这对我不适用:(

Answer 3

从规范中无耻地复制和粘贴：

<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
    fill="yellow" stroke="blue" stroke-width="5" />

路径使用“椭圆弧”命令绘制局部圆。您可以绘制其中的几个，每个描述一个不同的圆形截面，或者为其中一个指定一个 ID 并使用<use xlink:href="#ID" />. 然后就可以旋转了<use/>。根据粒度的需要绘制尽可能多的它们（例如，100 个扇区允许您以 0% 到 100% 的步长）。

要为它们着色，只需将fill=""每个单个扇区的属性设置为拟合值。