SVG Circle Stroke Origin

Joa*_*edt 5 javascript geometry svg

我在描述这个问题时遇到了麻烦,但是这里有:

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

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

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

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

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

dashoffset的计算方式如下:

                var pct = ((100-val)/100)*(Math.PI*(r*2));
Run Code Online (Sandbox Code Playgroud)

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

Kar*_*daw 7

将其添加到<circle ...></circle>SVG中的第2个:

transform="rotate(270,100,100)"
Run Code Online (Sandbox Code Playgroud)

在这里演示

  • 另一种选择是使用CSS:`transform-origin:center center; transform:rotate(-90deg);` (2认同)