Html SVG水平虚线圆

我尝试将以下内容创建为SVG：

即，带有水平虚线的圆

这是我目前拥有的SVG代码…由Adobe Illustrator生成：

---

这里有一种不同的方法，通过使用实际的线段而不是非常短的笔划划线，可以在渲染器中生成更稳定的相同外观

我使用了

和

来保持重复的正常-我定义了围绕中心的四条轴对齐线，然后将其旋转四分之一圈，每四圈的步数为偶数。（在我的示例中，为了舍入数字，我稍微更改了比例。）

请注意，如果放大，它将略有不同：在原始中，每个破折号将略微呈楔形（由于圆的曲线），而在这里，它们将具有恒定的宽度，因为它们只是普通线段

---

这里有一种替代方法，具有相同的刻度计数和刻度大小

并非所有人都使用Chrome。例如，你的代码在我的iPad上看起来很好。如果您希望获得尽可能好的质量、跨浏览器的一致性，并且不关心SVG的可伸缩性，那么当然可以使用位图。谢谢@Jongware我在发布后意识到了这一点！我会让它打开，以防有人想出一种更稳定的方式来生成SVG。。。我的观点是，我不认为这是SVG的错，而是渲染器的错。假设你找到了一种在Chrome上看起来很棒的方法，你个人对此非常满意。如果有人使用不同的渲染器，然后抱怨它在他的屏幕上看起来不好怎么办？谢谢@kevin reid这是一个很好的建议，似乎比我所做的更有意义。请注意，我在示例中没有使用楔子，因此这是完美的：）它渲染得稍微好一点，但我认为通常更清晰@PaulLeBeau我没有费心去数：）我的有72个滴答声，因为它以5度的步幅绕着圆圈旋转。