SVGでベジェ曲線を描く方法を学ぶ

pathを理解すると曲線を描けるようです。ちょっとだけ勉強しておこうかな。

ベジェ曲線

C: 三次ベジェ曲線

<path d="M 10 10 C 20 50, 110 50, 120 10" stroke="black" fill="none" />

“M”や”C”のことをコマンドと呼びます。

こちらコマンド群で大文字は絶対座標を示し、小文字は相対座標を示します。

“M”は基点、開始点を示し、”C”は三次ベジェ曲線を描画する。

“C”には引数が3つ必要です。

(直前の点をペアとする終了点の座標、終了点の開始点、終了点の終了点)

C x1 y1, x2 y2, x y又は、c dx1 dy1, dx2 dy2, dx dyを使用できます。

このコードのすべて

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 10 C 20 50, 110 50, 120 10" stroke="black" fill="none" />
    <path d="M10 10 L20 50" stroke="gray" />
    <path d="M110 50 L120 10" stroke="gray" />
    <circle cx="10" cy="10" r="2" fill="red" />
    <circle cx="20" cy="50" r="2" fill="red" />
    <circle cx="110" cy="50" r="2" fill="green" />
    <circle cx="120" cy="10" r="2" fill="green" />
</svg>

S: 連続的なベジェ曲線

<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" />

Sコマンドを使用すると直前の制御点を利用してベジェ曲線を連続して描画できる。

赤のラインの制御点が補完される。言い換えると省略可能。

<path d="M60 40 C60 30, 40 30, 40 40 S60 50, 60 60 S40 70, 40 60" stroke="black" fill="none" />

全然関係ないけどローマ字の”S”を書いてみた。なんかちょっと違う感じになった。

二次ベジェ曲線

Q: 連続的な二次ベジェ曲線。

制御点1つのベジェ曲線。三次よりシンプルですね。制御点が1つなのでカーブが1つまでですね。接点が1つです。

<path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent" />

T: 連続的な二次ベジェ曲線。繋ぎ目のショート定義。

Qコマンドの終了点を利用しつつ、終了点を指定するだけ。制御点は自動補完される。

<path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent" />

Links

Paths パス – mdn

9 基本図形 path以外の図形が登場 – W3C

~End.~