SVG圈中dasharray属性的奇怪行为

Question

我正在尝试创建一个SVG圈的无限动画循环.

我想创造12个相等的部分并将它分开一些空隙.

为了计算圆圈的价值我从下表中使用了k系数所以我做了0,25782*160(我的圆的直径)我得到了:41.2512(它应该是我的作品的值).

之后我通过该值创建了strokeDasharray prop:40 1.2512 我认为它应该是正确的值.

看起来是这样但是当我改变了strokedashOffset道具时,我在右侧看到了一些神器.我不知道为什么会发生这种情况以及如何解决它(以及我在哪里犯了错误)？

谢谢你的帮助.

在这里演示(只需将strokedashOffset更改为408值,您将看到该问题).

https://jsfiddle.net/q8enje9o/

这里是我的纯svg代码

<svg version="1.1" id="svgout_dasharray" baseProfile="full" width="500" 

height="500" viewBox="0, 0, 500, 500" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black">

<defs></defs>

<circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000" style="stroke-width: 30;stroke-dasharray: 40, 1.2512;stroke-dashoffset: 380;"></circle>
</svg>

表格k系数.n - 圆圈数

以下是如何计算这些系数的公式.通过它自己

n - 件数

360 - 2*PI(整圈)

k - 我们的系数.我们想找到

PS这是一个更新后问题的演示(Chrome最新版和Windows 10版)

Answer 1

如果你想要均匀间隔的线条,那么圆圈的圆周/笔划-dasharray值的总和必须是整数,而不是你的情况.

所以你可能想要一些像stroke-dasharray:40,1.8879; 哪个应该适用于任何stroke-dashoffset值.