SVGに中空の円を描く

Question

SVGで中空の円を描く方法にはわかりません。

私は、リングの形を色で塗りつぶして、黒い輪郭を描きたいと思います。

私はそれを行うことを考えた方法は、2つの円、もう1つの半径よりも小さい半径を持っていた。問題は、私がそれらを塗りつぶすとき、私は小さな円がそれが座っているものと同じ塗りつぶしの色になるようにするのですか？

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を生成する標準のSVGまたはJavaScriptでこれを達成する目的は

がここ http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2

行くと、対話式の例の右側にある「ドーナツの穴」をクリックし、単一のパス定義に相対「のmoveTo」コマンドを含むことによって達成することができます。 少なくとも、赤いドーナッツを作ったパスの定義を見ることができます。

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

ここで円に何らオッズをしない限り近いベジェ円弧を作成するためのルーチンです。あなたは完全な円のための道にそれらの4つが必要です。

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