在SVG中绘制一个空心圆

Question

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

我想要一个充满颜色的环形,然后是黑色轮廓.

我想做的方式是有两个圆,一个半径小于另一个圆.问题是当我填充它们时,如何使较小的圆圈采用与它所处的相同的填充颜色？

Answer 1

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

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

Answer 2

感谢Chasbeen,我想出了如何在SVG中制作一个真正的戒指/甜甜圈.请注意,外圆实际上并未关闭,这仅在您使用笔划时才会显现.当你有许多同心环时非常有用,特别是如果它们是交互式的(例如,使用CSS悬停命令).

对于绘图命令...

M cx, cy // Move to center of ring
m 0, -outerRadius // Move to top of ring
a outerRadius, outerRadius, 0, 1, 0, 1, 0 // Draw outer arc, but don't close it
Z // default fill-rule:even-odd will help create the empty innards
m 0 outerRadius-innerRadius // Move to top point of inner radius
a innerRadius, innerRadius, 0, 1, 1, -1, 0 // Draw inner arc, but don't close it
Z // Close the inner ring. Actually will still work without, but inner ring will have one unit missing in stroke       

JSFiddle - 包含几个环和CSS来模拟交互性.请注意,在起始点(顶部)缺少单个像素的缺点是,只有在您添加笔划时才会出现这种情况.

编辑:找到这个SO答案(更好的是,这个答案),它描述了如何获得空洞的内脏

Answer 3

MDragon00的答案有效,但内圈和外圈没有完美对齐(例如居中).

我稍微修改了他的方法,使用了4个半圆弧(2个外部圆弧和2个反向内部圆弧)以使对齐完全正确.

<svg width="100" height="100">
  <path d="M 50 10 A 40 40 0 1 0 50 90 A 40 40 0 1 0 50 10 Z M 50 30 A 20 20 0 1 1 50 70 A 20 20 0 1 1 50 30 Z" fill="#0000dd" stroke="#00aaff" stroke-width="3" />
</svg>

<!--

Using this path definition as d:

M centerX (centerY-outerRadius)
A outerRadius outerRadius 0 1 0 centerX (centerY+outerRadius)
A outerRadius outerRadius 0 1 0 centerX (centerY-outerRadius)
Z
M centerX (centerY-innerRadius)
A innerRadius innerRadius 0 1 1 centerX (centerY+innerRadius)
A innerRadius innerRadius 0 1 1 centerX (centerY-innerRadius)
Z

-->

Answer 4

您可以根据 SVG 规范，使用具有两个组件和 fill-rule="evenodd" 的路径来执行此操作。这两个组件是半圆弧，它们连接形成一个圆（在下面的“d”属性中，它们各自以“z”结尾）。内圆内的区域不计入形状的一部分，因此交互性良好。

稍微解码一下，“340 260”是外圆的顶部中间，“290 290”是外圆的半径（两倍），“340 840”是外圆的底部中间，“340 492”是内圆的顶部中间，“58 58”是内圆的半径（两倍），“340 608”是内圆的底部中间。

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M340 260A290 290 0 0 1 340 840A290 290 0 0 1 340 260zM340 492A58 58 0 0 1 340 608A58 58 0 0 1 340 492z" stroke-width="4" stroke="rgb(0,0,0)" fill="rgb(0,0,255)">
        <title>This will only display on the donut</title>
    </path>
</svg>