SVGパスのArcコマンドで円を描く
SVGパスの2つのarc（A）コマンドを使用して完全な円を描く方法を学びます。rx、ry、large-arc-flag、sweep-flagパラメータを理解します。
Basic Shapes
詳細な説明
パスの円弧で円を描く
<circle>要素がcx、cy、r属性を使用するのとは異なり、SVG <path>は円弧コマンドから円を構築する必要があります。ポイントは2つの半円弧を使って完全な円を形成することです。
パス
M 50,0 A 50,50 0 1,1 50,100 A 50,50 0 1,1 50,0 Z
コマンドの内訳
| セグメント | 意味 |
|---|---|
M 50,0 |
円の上端（中心x、中心y - 半径）に移動 |
A 50,50 0 1,1 50,100 |
rx=50, ry=50, rotation=0, large-arc=1, sweep=1の円弧を下端まで描画 |
A 50,50 0 1,1 50,0 |
2番目の円弧を上端まで描画 |
Z |
パスを閉じる |
なぜ2つの円弧が必要か？
単一の円弧コマンドでは360度の楕円を描けません。始点と終点が同一になるため、円弧の方向が曖昧になります。2つの180度の円弧に分割することで、各半円が明確になります。
円弧のパラメータ
Aコマンドは7つの数値を受け取ります：rx ry x-rotation large-arc-flag sweep-flag x y。円の場合、rxとryの両方が半径に設定されます。large-arc-flag（0または1）は2つの可能な円弧のうち大きい方を選択し、sweep-flag（0または1）は方向（時計回りvs.反時計回り）を制御します。
円のスケーリング
半径を変更するには、rx、ry、およびエンドポイントの座標を比例的に更新します。中心(cx, cy)で半径rの円の場合：
M cx,(cy-r) A r,r 0 1,1 cx,(cy+r) A r,r 0 1,1 cx,(cy-r) Z
ユースケース
CSS stroke-dasharray/stroke-dashoffsetでストロークをアニメーションする場合にパスベースの円を使用します。一部の古いブラウザではこれらのプロパティはpath要素でのみ動作するためです。アイコンフォントやSVGスプライトですべてのシェイプをパスにする必要がある場合にも有用です。