基本図形 SVGで台形を描く

SVGで台形を描く方法です。

ソースコード

<svg width="300" height="150">
	<path fill="red" d="M 0,150 300,150 250 0 50 0 0 150" />	
</svg>

説明

<circle>や<rect>のように台形専用の要素が用意されていないのでpath要素を使って一本一本線を描画していきます。

d="M 0,150 300,150 250 0 50 0 0 150"

1. まず底辺を描くために0,150の位置にMoveします（始点）
2. 0,150から300,150に線を引きます（下底）
3. 300,150から250 0に線を引きます（右上）
4. 250 0から0 50に線を引きます（左上）
5. 0 50から始点（0,150）に線を引きます