svg - 在SVG中画一个空心圆

Question

我不知道如何在 SVG 中绘制空心圆。

我想要一个填充颜色的环形形状，然后有一个黑色轮廓。

我的想法是有 2 个圆，其中一个的半径比另一个小。问题是当我填充它们时，如何使较小的圆圈采用与其所在位置相同的填充颜色？

Answer 1

只需使用fill="none"，然后仅绘制笔划(轮廓)。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
</svg> 

如果你想要两种颜色，或者这个:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
   <circle cx="100" cy="50" r="39" stroke="red" stroke-width="2" fill="none" />
</svg>