楕円というものは横向き(x方向)と縦向き(y方向)の二つの半径で定義されます. もしも二つの半径(長さ)が同じであれば楕円コマンドを使用しても正円(真円)となる. そして, 楕円に角度情報がプラスされると傾きが作られる.

〜 path の A と Q コマンド / パラメーターの解説

<path fill="none" stroke="red" d="M10 30A20 20 0 0 1 50 30A 20 20 0 0 1 90 30Q 90 60 50 90Q 10 60 10 30"/>

パスデータ A , Q コマンドとパラメーター

M10 30 が アンカーポイント-その1 「始点」.

A20 20 の 大文字Aコマンド は elliptical arc (アーク・コマンド)で, パラメータに基づいて楕円曲線のパスを「二つの半径によって」作るコマンドです. この場合は 20 20 が二つの半径(たまたま同じ長さ)で, 始点 M10 30 から右方向に 20 進んだ座標に 半径 x (横幅) 20 と, 半径 y (天地)を設定します. 回転の向きは時計回りが定義さているので, 実際の楕円の中心点は 30 30 ですが, この座標は自動計算されています.

次の 0 は円弧に対する角度(deg).

次の 0は円弧の大きさ(これは大小のどちらか, すなわち 1 が大きい円弧で 0 が小さい円弧 / このどちらかを選択する).

次の 1 は円弧を描く向き(時計回りなら 1 / 反時計回りなら 0 を選択する).

50 30 一つ目の Aコマンド(円弧パス)が終わるための絶対的な座標(パスが切れる場所). ここまでで左上の小さな半円が完成した.


2回目の A20 20 の 大文字A は同じく elliptical arc (楕円曲線のパスを作るコマンド)で, 最後の座標 50 30 (アンカーポイント-その2) から二つ目の円弧パスを作ります. 回転の向きは時計回りが定義さているので, 実際の楕円の中心点は 70 30 ですが, この座標は自動計算されています. 90 30 でパスが切れます.


コマンド 大文字Q は quadratic Bézier curve(二次ベジェ・カーブ)です.

最後の座標である 90 30 がアンカーポイント-その3で,制御点 90 60 を設定することで 50 90 との間にカーブするパスを描きます. ここまででハートの上部分と右半分が完成しました.


次のコマンド Q も quadratic Bézier curve(二次ベジェ・カーブ)です.

最後の座標である 50 90 がアンカーポイント-その4で, 制御点 10 60 を設定することで 10 30 との間にカーブするパスを描きます. これですべてが完成しました.

ちなみにコマンド Z は必要ありませんでした.