SVGパスの3次ベジェ（C）コマンドを理解する

3次ベジェコマンド（C）

Cコマンドは、2つのコントロールポイントによって形成される曲線を、現在の点から新しい端点まで描画します。SVGで最も汎用性の高い曲線コマンドです。

構文

C x1,y1 x2,y2 x,y

• (x1, y1) — 第1コントロールポイント（曲線の始まりに影響）
• (x2, y2) — 第2コントロールポイント（曲線の終わりに影響）
• (x, y) — 曲線が終わるエンドポイント

パスの例

M 10,80 C 40,10 65,10 95,80

(10, 80)から始まり、(40, 10)と(65, 10)のコントロールポイントに向かって上方に曲がり、(95, 80)で終わります。結果はスムーズなアーチです。

コントロールポイントの仕組み

曲線は始点から第1コントロールポイントに向かって出発し、第2コントロールポイントの方向から端点に到着します。コントロールポイントは曲線を引っ張る磁石のように作用しますが、曲線は実際にはそれらを通過しません。

複数の3次セグメント

複雑な曲線のために複数のCコマンドを連鎖できます：

M 10,50 C 30,10 50,10 70,50 C 90,90 110,90 130,50

これは2つの3次セグメントでS字カーブを作成します。セグメント間のスムーズな遷移には、1つのセグメントの第2コントロールポイントと次のセグメントの第1コントロールポイントが共有端点について対称である必要があります — またはS（滑らかな3次）コマンドを使用します。

相対 vs. 絶対

小文字のcは現在の点からの相対座標を使用します。大文字のCは絶対座標を使用します。相対は再利用可能で移動可能なパススニペットを構築する際に便利です。