Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

基本図形 SVGで六角形を描く

SVGで六角形を描くサンプルです。

SVG_六角形

ソースコード

<svg width="300" height="300" viewBox="-150 -150 300 300">
	<path d="M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z" style="fill:green"></path>
</svg>

説明

clip-pathプロパティのpolygon関数を使って正六角形を描いています。小数点以下は四捨五入しています。

四捨五入前のデータ

<path d="M129.9038105676658 74.99999999999999 L9.184850993605149e-15 150 L-129.9038105676658 74.99999999999999 L-129.9038105676658 -75.00000000000001 L-2.7554552980815446e-14 -150 L129.90381056766574 -75.00000000000007 z"></path>