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)"

在这里演示

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)"