SVGのArc（A）パスコマンドをマスターする

Arcコマンド（A）

arc（A）コマンドは、現在の点から新しい端点まで楕円弧を描画します。7つのパラメータを持つ、最も複雑なSVGパスコマンドです。

構文

A rx,ry x-rotation large-arc-flag sweep-flag x,y

パラメータ	説明
rx	楕円の水平半径
ry	楕円の垂直半径
x-rotation	楕円の回転角度（度）
large-arc-flag	0 = 小さい弧、1 = 大きい弧
sweep-flag	0 = 反時計回り、1 = 時計回り
x, y	エンドポイント座標

4つの可能な弧

始点、終点、半径が与えられると、4つの可能な弧があります。2つのフラグパラメータでどれを選択するかを決定します：

M 10,80 A 45,45 0 0,0 125,80   （小さい、反時計回り）
M 10,80 A 45,45 0 0,1 125,80   （小さい、時計回り）
M 10,80 A 45,45 0 1,0 125,80   （大きい、反時計回り）
M 10,80 A 45,45 0 1,1 125,80   （大きい、時計回り）

楕円の回転

x-rotationパラメータは楕円を傾けます。0の場合、楕円の軸は座標軸と一致します。45の場合、45度傾きます：

M 10,80 A 50,25 45 0,1 125,80

よくある落とし穴

• rxまたはryが端点に到達するには小さすぎる場合、ブラウザが自動的にスケールアップします。
• 単一の弧で完全な円は描けません（始点=終点は退化ケース）。代わりに2つの半円弧を使用します。
• 弧の方向はsweepフラグと始点/終点の位置の両方に依存します。