javascript - SVG 圆形描边原点

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

将此添加到第二个 <circle ...></circle>在 SVG 中:

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

Demo here