在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

这是经典的甜甜圈形状 我不知道，如果你想使用标准的SVG或者JavaScript来生成SVG 目标可以通过包括相对的“moveTo”命令，在一个单一的路径定义

转到这里 http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2

而且点击的互动的例子右侧的“甜甜圈洞”来实现。 至少你可以看到制作红色甜甜圈的路径定义。

Answer 3

感谢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 4

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 5

这里有一个程序来创建贝塞尔弧线尽可能接近都没有什么圆。你需要四条路径才能完成一个圆圈。

BezierCurve BezierArc(double ox, double oy, double r, double thetaa, double thetab) 
    { 
     double theta; 
     double cpx[4]; 
     double cpy[4]; 
     int i; 
     int sign = 1; 

     while (thetaa > thetab) 
      thetab += 2 * Pi; 
     theta = thetab - thetaa; 
     if (theta > Pi) 
     { 
      theta = 2 * Pi - theta; 
      sign = -1; 
     } 
     cpx[0] = 1; 
     cpy[0] = 0; 
     cpx[1] = 1; 
     cpy[1] = 4.0/3.0 * tan(theta/4); 
     cpx[2] = cos(theta) + cpy[1] * sin(theta); 
     cpy[2] = sin(theta) - cpy[1] * cos(theta); 
     cpx[3] = cos(theta); 
     cpy[3] = sin(theta); 
     cpy[1] *= sign; 
     cpy[2] *= sign; 
     cpy[3] *= sign; 

     for (i = 0; i < 4; i++) 
     { 
      double xp = cpx[i] * cos(thetaa) + cpy[i] * -sin(thetaa); 
      double yp = cpx[i] * sin(thetaa) + cpy[i] * cos(thetaa); 
      cpx[i] = xp; 
      cpy[i] = yp; 
      cpx[i] *= r; 
      cpy[i] *= r; 
      cpx[i] += ox; 
      cpy[i] += oy; 
     } 

     return BezierCurve({cpx[0], cpy[0]},{cpx[1], cpy[1]}, {cpx[2], cpy[2]}, {cpx[3], cpy[3]}); 
    }