在SVG中画一个空心圆 [英] Draw a hollow circle in SVG

问题描述

我不确定如何在SVG中绘制空心圆.

I'm not sure how to approach drawing a hollow circle in SVG.

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

I would like a ring shape filled with a colour and then have a black outline.

我想到的方法是有2个圆，一个圆的半径小于另一个圆.问题是当我填充它们时，如何使较小的圆圈具有与其所在的颜色相同的填充颜色?

The way I thought about doing it was have 2 circles, one with a smaller radius than the other. The problem is when I fill them, how do I make the smaller circle take the same fill colour as what it sits on?

推荐答案

只需使用fill="none"，然后仅绘制stroke(轮廓).

Just use fill="none" and then only the stroke (outline) will be drawn.

<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> 

如果要两种颜色，也可以这样:

Or this if you want two colours:

<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>

这篇关于在SVG中画一个空心圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！