你可以有两个互相覆盖的圆。第一个圆是灰色轮廓，第二个圆是进度覆盖。然后只改变第二个圆的stroke-dasharray和stroke-dashoffset值，并将svg旋转90度：
html：

<circle cx="25" cy="25" r="22.5" stroke="rgb(188,188,188)" stroke-width="5" fill="none"></circle>
<circle cx="25" cy="25" r="22.5" stroke="rgb(0,51,117)" stroke-width="5" fill="none" stroke-dasharray="{{circle.circumference}}" stroke-dashoffset="{{circle.circumference * (1 - circle.percentage/100)}}"></circle>

字符串
js：

function MyCtrl($scope) {
    var radius = 22.5;
    var circumference = Math.PI*(radius*2);
    $scope.circles = [];
    for(var i=0; i<=10; i++){
        var circle = {
            percentage : i* 10,
            circumference: circumference
      };
      $scope.circles.push(circle);
    }
}

型
css：

.progress {
    transform: rotate(-90deg);
}

型
Link to jsfiddle
我发现这个tutorial很有用。

对于任何想知道的人，如果你正在制作一个环形饼图，计算stroke-dasharray的公式应该是：𝝿(width-thickness)（假设厚度+ innerCircleRadius +厚度=宽度= outerCircleRadius）

圆的半径为22.5，因此破折号数组的正确长度应为

(2 * PI * 22.5) = 141.37

字符串
第二，你可以只使用stroke-dasharray本身。不需要也使用stroke-dashoffset。

stroke-dasharray="{{circle.percentage*142/100}} 142"

型
Updated fiddle

• 注意：我删除了stroke-linecap="square"。如果你故意添加的话，你可能想把它放回去。*