更新: 2023-10-11 / 作成: 2023-10-11

A コマンドのパラメーター

SVG の path 要素の d 属性に A/a コマンドを指定すると、様々な形状の円弧（楕円の一部）を描画することができます（参考: path 要素のチートシート）。パラメーターが多くて分かりにくいのでまとめておきます。

図: path 要素による円弧の描画

具体例

<svg width="200" viewBox="-20 -65 140 85">
  <path d="M0,0 A50 50 0 0 1 100 0" stroke="black" fill="none" />
</svg>

A/a コマンドは、円弧の始点として「現在の座標」を使うので、通常は上記のように、先行する M コマンドなどで始点座標を移動しておきします。円弧の線だけを表示するには、stroke に線の色を指定し、fill に none（塗りつぶしなし）を指定しておく必要があります。

A コマンドには次の 7 つの数値パラメーターを指定します。 a コマンドの場合は、最後の終点座標 (x, y) の指定が、相対位置 (dx, dy) の指定に変わります。

A コマンドのパラメーター

<rx> <ry> <x-axis-rotation> <large-arc-flag> <sweep-flag> <x> <y>

パラメーター	説明
`rx`	円弧の X 軸半径
`ry`	円弧の Y 軸半径
`x-axis-rotation`	X 軸からの傾き (radian)
`large-arch-flag`	`1`: 大きな弧の部分を描画 `0`: 小さな弧の部分を描画
`sweep-flag`	`1`: 時計回り (clockwise) になる弧の部分を描画 `0`: 反時計回り (counterclockwise) になる弧の部分を描画
`x` (`dx`)	円弧の終点 X 座標（`A` コマンドなら絶対座標、`a` コマンドなら相対座標）
`y` (`dy`)	円弧の終点 Y 座標（`A` コマンドなら絶対座標、`a` コマンドなら相対座標）

下記のギャラリーを見ると、具体的な指定方法を理解できると思います。

ギャラリー

	`d="M0,0 A50 50 0 0 1 100 0"` sweep-flag=1（時計回りで終点に向かう）
	`d="M0,0 A50 50 0 0 0 100 0"` sweep-flag=0（反時計回りで終点に向かう）

	`d="M0,0 A50 50 0 1 1 50 50"` 大きい弧 (large-arch-flag=1) 時計回り (sweep-flag=1)
	`d="M0,0 A50 50 0 0 0 50 50"` 小さい弧 (large-arch-flag=0) 反時計回り (sweep-flag=0)
	`d="M0,0 A50 50 0 1 0 50 50"` 大きい弧 (large-arch-flag=1) 反時計回り (sweep-flag=0)
	`d="M0,0 A50 50 0 0 1 50 50"` 小さい弧 (large-arch-flag=0) 時計回り (sweep-flag=1)