css - 使用dasharray和dashoffset计算进度圈背后

Question

我正在构建一个小的 angularjs 指令，它将显示一个进度圈(我不想要动画)，中间会有一个文本指示完成的百分比。
圆圈的html代码为:

   <path fill="none" stroke="rgb(0,51,117)" stroke-width="5" stroke-linecap="square" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5" stroke-dasharray="105" stroke-dashoffset="{{circle.percentage*(-140)/100 + 105 }}">
    </path>

我不知道dasharray和dashoffset后面的计算，我得到了计算{{circle.percentage*(-140)/100 + 105 }}通过调整 dashoffset 和猜测。

我有一把 fiddle http://jsfiddle.net/ADukg/10992/

如您所见，它仅适用于 30% 到 70% 的圆圈。有谁知道它的正确计算方法吗？我使用 CSS 标签作为我的问题的标签之一，因为计算也应该在 CSS 中工作。先感谢您

Answer 1

你可以有两个相互重叠的圆圈。第一个圆圈是灰色轮廓，第二个圆圈是进度叠加。然后更改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有帮助。