SVG Circle Stroke Origin

Question

我在描述这个问题时遇到了麻烦，但这里有：

我正在尝试创建一个SVG圈子进度条，我找到了一个完美的例子，说明我想要做什么而没有像snap这样的第三部分库：

http://codepen.io/JMChristensen/pen/Ablch

问题是我在改变中风的起源方面遇到了实际问题。正如您所知，如果您尝试一下，原点就在右侧。我需要它来自顶部。

现在，我是一名开发人员，所以我已经尝试过自己，但我不能为我的生活找到方法。如果我更改stroke-dasharray属性，则笔划将与stroke-dashoffset中设置的百分比不匹配。

我理解这一切都归结为使用stroke-dasharray值的数学，但我不太明白该怎么做。

dashoffset的计算如下：

                var pct = ((100-val)/100)*(Math.PI*(r*2));

并且它与标准dasharray值565.48之间必须存在某种相关性。在任何地方都没有提到它。

Answer 1

将其添加到SVG中的第二个<circle ...></circle>：

transform="rotate(270,100,100)"

Demo here

Answer 2

关于你的最后一点询问：

  

并且它与标准dasharray值565.48之间必须存在某种相关性。在任何地方都没有提到它。

好吧，π（r * 2）或简单的2πr会给你一个圆的圆周，这反过来为你提供了完成圆的短划线数组的适当值。

例如：

你的SVG圆的半径为90。

2π（90） = 565.48 ，因此您的短划线阵列 565.48 。

如果你的半径是45 ......

2π（45） = 282.74 ，因此您的短划线阵列将 282.74 。

Answer 3

270度旋转的替代方案：

transform="matrix(0,-1,1,0,0,200)"