SVG小半径<circle>元素描边出现内部空洞的技术问题咨询

我为自研软件制作了一个仅使用SVG轮廓、无填充的图标库，方便调整外观与颜色。但使用<circle/>元素实现小点时遇到问题：虽然<circle/>能灵活调整尺寸，但在不同缩放比例及渲染软件环境下，本该完全填充的圆圈有时会出现内部空洞。

代码示例 #

<svg stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="18" cy="12" r=".5"/>
<circle cx="12" cy="12" r=".5"/>
<circle cx="6" cy="12" r=".5"/>
</svg>

问题效果 #

• 带空洞的SVG效果：
• 正常无空洞的SVG效果：

问题原因 #

这是SVG渲染的精度问题：当圆圈半径小于stroke-width的一半时，描边会同时向圆圈内外扩展，部分渲染引擎在缩放过程中无法精准计算边界，导致内部出现空隙。你的代码中r=".5"，而stroke-width="1.5"，半径小于描边宽度的一半（0.75），触发了这个渲染bug。

解决方法 #

1. 改用填充实现小点（推荐） #

既然是制作实心小点，直接给<circle/>设置填充色，去掉描边属性，渲染稳定性大幅提升：

<svg fill="currentcolor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="18" cy="12" r=".75"/>
  <circle cx="12" cy="12" r=".75"/>
  <circle cx="6" cy="12" r=".75"/>
</svg>

将半径调整为原描边宽度的一半（0.75），保证视觉大小和之前一致。

2. 调整描边与半径的匹配关系 #

如果坚持使用描边，让半径等于stroke-width/2，同时将stroke-linecap改为square（圆形端点在小尺寸下更容易出现渲染断层）：

<svg stroke="currentcolor" stroke-width="1.5" stroke-linecap="square" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="18" cy="12" r=".75"/>
  <circle cx="12" cy="12" r=".75"/>
  <circle cx="6" cy="12" r=".75"/>
</svg>

3. 用圆角矩形替代圆圈 #

小尺寸下，圆角矩形的渲染精度更高，通过rx属性设置圆角半径，视觉效果和圆圈一致：

<svg stroke="currentcolor" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="17.25" y="11.25" width="1.5" height="1.5" rx=".75"/>
  <rect x="11.25" y="11.25" width="1.5" height="1.5" rx=".75"/>
  <rect x="5.25" y="11.25" width="1.5" height="1.5" rx=".75"/>
</svg>

内容的提问来源于stack exchange，提问作者Tim Nikischin