連続曲線のための滑らかな3次ベジェ(S)

Sコマンドが前のコントロールポイントを反転してスムーズな曲線を作成する方法を学びます。より少ないパラメータでシームレスなマルチセグメントベジェ曲線を構築します。

Path Commands

詳細な説明

滑らかな3次コマンド(S)

SコマンドはCの省略形で、前のセグメントの第2コントロールポイントを現在の点を中心に反転して第1コントロールポイントを自動計算します。

構文

S x2,y2 x,y
  • (x2, y2) — 第2コントロールポイント
  • (x, y) — エンドポイント

第1コントロールポイントは前のCまたはSコマンドの第2コントロールポイントの反転として計算されます。

例:S字カーブ

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

最初のセグメントは(30, 10)と(50, 10)のコントロールポイントでCを使用します。2番目のセグメントはSを使用し、(50, 10)を(70, 50)を中心に反転して(90, 90)を暗黙の第1コントロールポイントとして取得します。

なぜスムーズが重要か

Sがなければ、3次ベジェセグメントをスムーズに接続するには第1コントロールポイントの慎重な手動配置が必要です。Sでは、接合部での接線方向が連続的であるため、スムーズさが保証されます。

視覚的比較

# 手動(セグメントごとに6パラメータ):
M 10,50 C 30,10 50,10 70,50 C 90,90 110,90 130,50

# Sを使用(2番目のセグメントは4パラメータのみ):
M 10,50 C 30,10 50,10 70,50 S 110,90 130,50

両方とも同一の出力を生成しますが、Sはより簡潔で本質的にスムーズです。

複数のSコマンドの連鎖

後続のSはそれぞれ前のセグメントから反転し、長くスムーズな曲線を作成します:

M 0,50 C 20,10 40,10 60,50 S 100,90 120,50 S 160,10 180,50

これは3つのセグメントでスムーズなウェーブパターンを生成します。

ユースケース

滑らかな3次ベジェはアイコンデザイン、データチャートの線、正弦波の近似、鋭い遷移なしに視覚的に連続する必要があるマルチセグメント曲線に広く使用されます。

試してみる — SVG Path Editor

フルツールを開く