基本図形 SVGでひし形を描く

SVGでひし形（rhombus,diamond）を描くサンプルです。

ソースコード

polygonを使う場合

<svg width="300" height="180">
	<polygon points="150,0 300,90 150 180 0 90"/>
</svg>

pathを使う場合

<svg width="180" height="300">
	<path d="M 90 0 L 180 150 L 90 300 L 0 150 z"/>
</svg>

説明

polygon,pathともに、ひし形の各点の座標を指定することで図形を描画します。polygonのほうが構文が単純でわかりやすいです。