SVGの円弧パスによる円の描画

簡単な質問：SVGパスを使用すると、99.99％の円を描画して表示できますが、99.99999999％の円の場合、円は表示されません。どうすれば修正できますか？

次のSVGパスは99.99％の円を描くことができます：（http://jsfiddle.net/DFhUF/1381/で試して、4つのアークまたは2つのアークしか表示されないか確認してください。ただし、IEの場合は、 SVGではなくVMLでレンダリングされますが、同様の問題があります）

M 100 100 a 50 50 0 1 0 0.00001 0

しかし、それが円の99.99999999％の場合、何も表示されません。

M 100 100 a 50 50 0 1 0 0.00000001 0    

そして、それは円の100％と同じです（それはまだ弧です、そうではありません、非常に完全な弧です）

M 100 100 a 50 50 0 1 0 0 0 

どうすれば修正できますか？その理由は、関数を使用して円弧のパーセンテージを描画することです。円関数を使用するために99.9999％または100％の円弧を「特殊なケース」で使用する必要がある場合、それはちょっとばかげているでしょう。

ここでも、RaphaelJSを使用したjsfiddleのテストケースはhttp://jsfiddle.net/DFhUF/1381/にあります
（IE 8のVMLの場合、2番目のサークルも表示されません...に変更する必要があります） 0.01）

更新：

これは、システムでスコアの弧を描画しているため、3.3ポイントで円の1/3が得られるためです。0.5は円の半分を取得し、9.9ポイントは円の99％を取得します。しかし、システムに9.99のスコアがある場合はどうなりますか？円の99.999％に近いかどうかを確認しarc、circleそれに応じて関数または関数を使用する必要がありますか？では、9.9987のスコアはどうでしょうか。どちらを使用しますか？どのようなスコアが「完全すぎる円」にマッピングされ、円関数に切り替わるかを知る必要があるのはばかげています。円の「特定の99.9％」または9.9987のスコアの場合は、円弧関数を使用します。 。

XAMLの弧についても同じです。99.99％の弧をaで閉じるだけでZ、円ができます！

私はそれがゲームの少し遅いことを知っています、しかし私はそれが新しく、私が同様のディレンマを持っていたときからこの質問を思い出しました、そして誰かがまだそれを探しているなら、私は誤って「正しい」解決策を見つけました：

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

つまり、これは：

<circle cx="100" cy="100" r="75" />

これでパスとして達成できます：

  <path 
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

秘訣は、2つの弧を作成することです。2番目の弧は、最初の弧が中断したところから始まり、負の直径を使用して元の弧の始点に戻ります。

1つの円弧で完全な円として実行できないのは（そして私は推測しているだけです）、それ自体から（150,150としましょう）からそれ自体（150,150）に円弧を描くように指示しているためです。 「ああ、私はすでにそこにいます、アークは必要ありません！」。

私が提供するソリューションの利点は次のとおりです。

1. 円からパスに直接変換するのは簡単です。
2. 2つの円弧線に重複はありません（マーカーやパターンを使用している場合に問題が発生する可能性があります）。2つの部分で描かれていますが、きれいな連続線です。

textpathsが図形を受け入れることだけを許可する場合、これは問題になりません。しかし、私は彼らがその解決策を回避していると思います。なぜなら、円のような形状要素には技術的に「開始」点がないからです。

jsfiddleデモ：http ://jsfiddle.net/crazytonyi/mNt2g/

更新：

textPath参照にパスを使用していて、テキストを円弧の外縁にレンダリングしたい場合は、まったく同じ方法を使用しますが、スイープフラグを0から1に変更して、内側ではなく表面としてのパス（1,0誰かが中心に座って自分の周りに円を描くように、1,1誰かが中心を半径距離で歩き回り、チョークをそれらのそばにドラッグすると、それが助けになれば）上記のコードですが、変更が加えられています。

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>

Anthonyのソリューションを参照して、パスを取得する関数を次に示します。

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}

まったく異なるアプローチ：

パスをいじってsvgで弧を指定する代わりに、circle要素を使用して、疑似コードでストロークダッシュ配列を指定することもできます。

with $score between 0..1, and pi = 3.141592653589793238

$length = $score * 2 * pi * $r
$max = 7 * $r  (i.e. well above 2*pi*r)

<circle r="$r" stroke-dasharray="$length $max" />

その単純さは、複数の弧のパスを使用する方法よりも優れています（たとえば、スクリプトを作成すると、1つの値をプラグインするだけで、任意の弧の長さで完了します）。

弧は右端の点から始まり、回転変換を使用して移動できます。

注：Firefoxには、90度以上の回転が無視されるという奇妙なバグがあります。したがって、上からアークを開始するには、次を使用します。

<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />

Adobe IllustratorはSVGのようなベジェカーブを使用し、円の場合は4つのポイントを作成します。2つの楕円弧コマンドで円を作成できますが、SVGの円の場合は<circle />:) を使用します。

2つの円弧コマンドを使用して完全な円を描くことをお勧めします。

通常、私は楕円または円要素を使用して完全な円を描きます。

アンソニーとアントンの答えに基づいて、外観全体に影響を与えずに生成された円を回転させる機能を組み込みました。これは、アニメーションのパスを使用していて、アニメーションの開始位置を制御する必要がある場合に役立ちます。

function(cx, cy, r, deg){
    var theta = deg*Math.PI/180,
        dx = r*Math.cos(theta),
        dy = -r*Math.sin(theta);
    return "M "+cx+" "+cy+"m "+dx+","+dy+"a "+r+","+r+" 0 1,0 "+-2*dx+","+-2*dy+"a "+r+","+r+" 0 1,0 "+2*dx+","+2*dy;
}

パス変換の楕円属性を探していた私のような人たちのために：

const ellipseAttrsToPath = (rx,cx,ry,cy) =>
`M${cx-rx},${cy}a${rx},${ry} 0 1,0 ${rx*2},0a${rx},${ry} 0 1,0 -${rx*2},0`

関数として書くと、次のようになります。

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}

これらの答えは非常に複雑です。

2つの円弧を作成したり、異なる座標系に変換したりせずにこれを行うためのより簡単な方法。

これは、キャンバス領域に幅wと高さがあることを前提としていますh。

`M${w*0.5 + radius},${h*0.5}
 A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`

「長い弧」フラグを使用するだけで、完全なフラグが設定されます。次に、円弧を99.9999％完全な円にします。視覚的には同じです。円の右端の点（中心から直接水平に1つの半径）から円を開始するだけで、スイープフラグを回避します。

別の方法は、2つの3次ベジェ曲線を使用することです。これは、svgのarcパラメータを認識しないpocketSVGを使用しているiOS ユーザー向けです。

C x1 y1、x2 y2、xy（またはc dx1 dy1、dx2 dy2、dx dy）

ここで最後の座標セット（x、y）は、線を終了する場所です。他の2つはコントロールポイントです。（x1、y1）は曲線の始点の制御点、（x2、y2）は曲線の終点の制御点です。

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />

私はここでそれを行うためにjsfiddleを作りました：

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

function describeArc(x, y, radius, startAngle, endAngle){

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");

return d;       
}
console.log(describeArc(255,255,220,134,136))

リンク

必要なのは、console.logの入力を変更して、コンソールで結果を取得することだけです。