我正在构建一个小的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背后的计算,我通过调整dashoffset和猜测得到{{circle.percentage*(-140)/100 + 105 }}
的计算。
我有一把小提琴http://jsfiddle.net/ADukg/10992/
正如你所看到的,它只适用于30%到70%的圆。有人知道它的正确计算吗?我使用CSS标签作为我的问题的标签之一,因为计算也应该在CSS中工作。提前谢谢你
3条答案
按热度按时间nwo49xxi1#
你可以有两个互相覆盖的圆。第一个圆是灰色轮廓,第二个圆是进度覆盖。然后只改变第二个圆的
stroke-dasharray
和stroke-dashoffset
值,并将svg旋转90度:html:
字符串
js:
型
css:
型
Link to jsfiddle
我发现这个tutorial很有用。
nx7onnlm2#
对于任何想知道的人,如果你正在制作一个环形饼图,计算
stroke-dasharray
的公式应该是:𝝿(width-thickness)
(假设厚度+ innerCircleRadius +厚度=宽度= outerCircleRadius)yvgpqqbh3#
圆的半径为22.5,因此破折号数组的正确长度应为
字符串
第二,你可以只使用
stroke-dasharray
本身。不需要也使用stroke-dashoffset
。型
Updated fiddle
stroke-linecap="square"
。如果你故意添加的话,你可能想把它放回去。*