Welcome
自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。
基本図形 SVGで三角形を描く
簡単な三角形をSVGで描いていきます。<circle>や<rect>のような専用の要素は用意されていないので少し手間がかかります。
path要素を使う場合
<svg width="200" height="200">
<path d="M 100 0 L 200 200 L 0 200 z" />
</svg>
pathは図形の外形線を表現します。
d属性
pathはd属性にパスデータを設定することで定義されます。
d="M 100 0 L 200 200 L 0 200 z"
M
Mはmoveto命令を表し、現在の点を新しく設定します。M 100 0とするとx=100,y=0の位置が現在の点となり、パスの開始位置となります。
L
Lはlineto命令を表し、現在の点から (x,y) で与えられる座標へ直線を描き、その座標を新しく現在の点とします。
z
zまたはZはclosepath命令を表し、現在の部分パスの終了を意味し、現在の点から現在の部分パスの始点への直線が自動的に描かれ部分パスを閉じます。
参考リンク
polygon要素を使う場合
polygon要素は、複数のつながった線で構成される閉じた多角形を定義します。
<svg width="200" height="200">
<polygon points="100 27, 200 200, 0 200"/>
</svg>
3つの点の座標を設定するだけで閉じた図形（三角形）にしてくれます。