2

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

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

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

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

4

1 回答 1

2

由于您使用stroke-dasharray的是circle，因此您需要使用 π (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} );应用的样式。

我分叉了你的 JSFiddle 1。

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

于 2013-12-05T01:11:07.787 回答