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（更好的是，this answer），它描述了如何获得空洞的内脏

Answer 3

这是经典的甜甜圈形状我不确定您是否尝试使用生成SVG的标准SVG或JavaScript来实现此目的可以通过在单个路径定义中包含相对“moveto”命令来实现目标

然后点击交互式示例右侧的“甜甜圈洞”。至少你可以看到制作红色甜甜圈的路径定义。

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>

在SVG中绘制一个空心圆

4 个答案: