作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个小的 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>
{{circle.percentage*(-140)/100 + 105 }}
通过调整 dashoffset 和猜测。
最佳答案
你可以有两个相互重叠的圆圈。第一个圆圈是灰色轮廓,第二个圆圈是进度叠加。然后更改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>
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);
}
}
.progress {
transform: rotate(-90deg);
}
关于css - 使用dasharray和dashoffset计算进度圈背后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44006664/
我是一名优秀的程序员,十分优秀!