Welcome

カキノタblog

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

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

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

svg_五角形

ソースコード

<svg width="300" height="300" viewBox="-150 -150 300 300">
	<path d="M142 -47 L88 121 L-89 121 L-143 -47 L-1 -150 z" style="fill:darkviolet"></path>
</svg>

説明

path要素のd属性にパスデータを指定することで正五角形を描いています。小数点以下は切り捨てています。

切り捨て前の値

<path d="M142.65847744427302 -46.35254915624211 L88.16778784387097 121.35254915624212 L-88.16778784387095 121.35254915624212 L-142.65847744427305 -46.35254915624209 L-2.7554552980815446e-14 -150 z"></path>