在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]}); 
    }