【SVG】折れ線と多角形を描く＜polyline＞＜polygon＞

動点Qちゃん

直線で構成される図形、折れ線や多角形の描き方を解説します・・・

変数ｘ

各頂点とそれを結ぶ線さえあればできる図形だ

動点P

なんでお前はそんなに偉そうなんだよ

というわけで今回の参考図書も「Webで使える!SVGファーストガイド」です。

折れ線を描く＜polyline＞要素

SVGで折れ線を描くときは polyline 要素を使います。各頂点の座標をｘ、ｙ座標セットで points 属性に指定します。(下の図形の1つ目には座標も表示しています。)

インラインSVG

<svg width="400px" height="200px" viewBox="0 0 400 200">
<!-- 最初の図形 -->
	<polyline points="10,10 100,150 190,10"
fill="none" stroke="red" stroke-width="10"/>
<!-- 2つ目の図形 -->
　<polyline points="200,50 300,150 390,50"
fill="yellow" stroke="red" stroke-width="10"/>
</svg>

基本の書きかた

<polyline points=”最初のx,ｙ 次のｘ,ｙ…最後のｘ,ｙ” />

そしてこのままだと透明の線で何も表示されないので、stroke属性などで装飾を施せば表示されるようになります。

塗りの色を指定すると2つ目の図形のように中に色が付きます。

多角形を描く＜polygon＞要素

描きかたは折れ線のときと同じで、polygon 要素を使うと、終点と始点が勝手につながれることになります。

<svg width="400px" height="200px" viewBox="0 0 400 200">
<!-- 最初の図形 -->
	<polygon points="10,10 100,150 190,10"
fill="none" stroke="red" stroke-width="10"/>
<!-- 2つ目の図形 -->
　<polygon points="200,50 300,150 390,50"
fill="yellow" stroke="red" stroke-width="10"/>
</svg>

基本の書きかた

<polygon points=”最初のx,ｙ 次のｘ,ｙ…最後のｘ,ｙ” />

polylineのときと同じように各頂点のｘ、ｙ座標を指定します。最後の座標と最初の座標は勝手に直線で繋がれるようになるのでつなぐ線を描く指示はいりません。これも線や塗りを指定して表示させます。

角の形状

stroke-linejoin 属性によって、折れるポイントの角をどのような形状にするか指定できます。