每个圆圈的破折号数相同 - SVG

Question

首先让我说我的最终目标类似于下图。它在每个环中有 36 个圆圈，其间距使得每个点都位于其内部圆圈中两个点之间的中间

我发现我可以使用长度非常小的stroke-dasharray（在我的情况下为.001）和stroke-linecap="round" 来制作边框圆点。我现在设置它的方式每个circle 都有一个比上一个大5 的radius 和一个递增的percentage 用于stroke-dasharray。 Here is my jsFiddle。目前我最内圈只有21个点，我最外圈有29个点

如何才能在每个圆圈中获得相同数量的点？是否有数学方法可以做到这一点或我不知道的属性？可以做些什么来均匀地使用整个圆周来均匀地隔开圆圈（而不是在我所感知的右侧有一些作为x轴）？

在我看来，我必须简单地猜测并检查这些值才能以我想要的方式得到它，但我很想被证明是错误的。 stroke-dasharray documentation on Mozilla and W3C 不是很有用

Answer 1

由于您在圆上使用stroke-dasharray，因此您需要使用 π (3.14159265) 来获得均匀的间距。

给定公式 spacing = (radius × 2) × 3.14159265 ÷ numberOfCircles，您的 SVG 圆将为 <circle r="{radius}" stroke-dasharray="0.001, {spacing}"/>。

要实现螺旋效果，请对每个其他环应用360 ÷ numberOfCircles ÷ 2 的旋转。我使用 CSS 来完成此操作，circle:nth-child(even) 是选择器，-webkit-transform: rotate( {rotation} ); 是应用的样式。

I forked your JSFiddle¹.

¹ 请注意，螺旋仅在 webkit 浏览器中可见。此外，据我所知，由于未知原因，右侧的环略有错位。