SVG 圆笔画原点答案

【问题标题】：SVG Circle Stroke OriginSVG 圆笔画原点
【发布时间】：2014-04-28 15:35:44
【问题描述】：

我无法描述这个问题，但这里是：

我正在尝试制作一个 SVG 圆形进度条，并且我找到了一个完美的示例，说明我想要在没有任何第三方库（如 snap）的情况下做些什么：

问题是我在更改笔画的原点时遇到了真正的问题。如果您尝试一下，您会注意到，原点位于右侧。我需要它来自顶部。

现在，我是一名开发人员，所以我已经尝试过自己，但我终生无法弄清楚如何去做。如果我更改 stroke-dasharray 属性，则笔画将与 stroke-dashoffset 中设置的百分比不匹配。

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

dashoffset 的计算方式如下：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

关于您的最后一点询问：

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

嗯，π(r*2) 或简单的 2πr 会给你一个圆的周长，这反过来给你一个合适的值来完成圆的破折号数组。

例如：

您的 SVG 圆的半径为 90。

2π(90) = 565.48，因此您的 dash-array 将是 565.48。

如果你的半径是 45...

2π(45) = 282.74，所以你的 dash-array 将是 282.74。

【讨论】：

【解决方案3】：

270 度旋转的替代方案：

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

【讨论】：