Question

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

我想创造12个相等的部分，然后将它们分开。

为了计算圆片的值，我使用了下表中的 k 系数所以我做了0,25782 * 160（我的圆圈的直径），我得到了：41.2512（它应该是我的作品的价值）。

之后我通过该值创建了 strokeDasharray 道具： 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 - 我们的系数。我们想找到

P.S。以下是更新后问题的演示（Chrome最新版和Windows 10版）

Answer 1

如果你想要均匀间隔的线条，那么圆圈的圆周/笔划 - 达哈哈值的总和必须是整数。在你的情况下它不是。

所以你可能想要一些像stroke-dasharray：40,1.8879;它应该适用于任何stroke-dashoffset值。

Answer 2

你的问题有点令人困惑，因为你谈了很多关于你如何计算破折号数组的问题，但是当你改变破折号偏移时抱怨看起来很有趣。

圆的周长是2 * PI *半径。如果你想在你周围有一个 n 部分，那么你的破折号数组中的“破折号+差距”需要求和：

<svg width="500" height="500" style="border: 1px solid black">
  <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
          style="stroke-width: 30;stroke-dasharray: 40 1.8879;"/>
</svg>

因此，对于12个扇区，半径为80，该值将为

<svg width="500" height="500" style="border: 1px solid black">
  <circle cx="150" cy="150" r="80" fill="none" stroke="#ff0000"
          style="stroke-width: 30;stroke-dasharray: 40 1.8879; stroke-dashoffset: 408;"/>
</svg>

正如罗伯特所说，“stroke-dashoffset =”40 1.8879“应该有效。确实如此。

margin-right

现在你也谈谈破折号。我不知道你为什么要改变破折号。我想你是想让破折号绕着某个东西旋转。是吗？

如果是这样，那么这应该有用 - 只要你准确使用破折号数组值。见下文。

margin-left

SVG圈中dasharray属性的奇怪行为

2 个答案: