SVG

The `path` element in Scalable Vector Graphics (SVG) is a flexible drawing command that combines straight lines and curves to create complex shapes.

path

　Scalable Vector Graphics (SVG) の path要素は、SVG画像内で複雑な図形や線を描くために使用される最も柔軟で強力な要素の一つです。path要素は、単純な直線や曲線だけでなく、複数のセグメントを組み合わせた複雑な形状を作成するために利用されます。

path要素の基本的な構造

　path要素の中で最も重要な属性は d で、これが実際の描画を指示する命令のリストを持っています。命令は、座標や動きを指定するコマンドの組み合わせで構成されます。

主なコマンド

M (move to)

ペンの位置を指定された座標に移動します。

L (line to)

現在の位置から指定された座標まで直線を引きます。

C (cubic Bézier curve)

3つの制御点を使って曲線を描きます。

Q (quadratic Bézier curve)

2つの制御点を使って曲線を描きます。

Z (close path)

現在の位置から開始点まで線を引き、パスを閉じます。

Sample

　path要素を使って三角形を描く例です。

<svg width="100" height="100">
	<path d="M 10 10 L 90 10 L 50 90 Z" stroke="black" fill="transparent"/>
</svg>

　このコードは、次のように解釈されます。

M 10 10

(10, 10) にペンを移動。

L 90 10

(90, 10) まで直線を引く。

L 50 90

(50, 90) まで直線を引く。

Z

パスを閉じ、(10, 10) に戻る。