svg - 每圈的虚线数量相同 - SVG

Question

首先我要说的是，我的最终目标类似于下图。每个环中有 36 个圆圈，每个点都位于其内部圆圈中的两个点之间的中间位置

我发现我可以使用长度非常小的Stroke-dasharray(在我的例子中是.001)和Stroke-linecap="round" 使边框成为圆点。我现在设置的方式是，每个圆的半径都比上一个大5，并且笔画的百分比递增 -破折号数组。 Here is my jsFiddle 。目前我的最内环只有 21 个点，我的最外环有 29 个点

如何获得每个圆的相同点数？有没有一种数学方法可以做到这一点或我不知道的属性？可以采取什么措施来均匀地使用整个圆周均匀地间隔开圆(而不是在我感知的右侧有一些圆)作为 x 轴)？

在我看来，我必须简单地猜测并检查这些值，才能按照我想要的方式得到它，但我希望被证明是错误的。 笔划-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 浏览器中可见。此外，据我所知，右侧的圆环略有错位，原因未知。