多角形（polygon, polyline）

多角形を描くには、polygon と polyline の２つが用意されている。
どちらも塗りつぶし（fill）ができるが、２つのタグの違いは、 開始点と終了点が自動的につながるのが polygon、つながらないのが polyline である。
両方ともに、xy座標の配列（points）を使って、線をつなげていく。

    <polygon points="60,20 20,100, 100,100" fill="lightgray"
        stroke="gray" stroke-width="4" />
    <polyline points="200,20 160,100, 240,100" fill="lightgray"
        stroke="gray" stroke-width="4" />

どちらも座標の配列（points）を使って、３点分指定しているが、polygon の場合は最初と最後が つながっているが、polyline の場合には線はつながらない。ただし、塗りつぶし（fill）は、 されるので、ほとんど違いがないといえば違いがない。
おそらく、polygon は、３次元の多角形を作るときに使い、polyline は折れ線グラフのような ２次元的なグラフィックに使うのではないだろうか。
また、直線と曲線を同時に描く path タグがある。これは機能が豊富なので、別項を参照（予定）。

多角形（polygon, polyline）を使って、クロスした場合を見てみよう。
結果を見ればわかるが、うまい具合に塗りつぶしがなされている。 このあたりは実際に動かしながら確認したほうがよいだろう。

    <polygon points="20,20 100,20, 20,100 100,100" fill="lightgray"
        stroke="gray" stroke-width="4" />
    <polygon points="160,30 140,100 200,60 120,60 180,100" fill="lightgray"
        stroke="gray" stroke-width="4" />
    <polygon points="200,40 240,100 280,40"
        fill="none" stroke="gray" stroke-width="4" />
    <polygon points="200,80 240,20 280,80" 
        fill="none" stroke="gray" stroke-width="4" />

ラインキャップ（stroke-linecap）と結合部（stroke-linejoin）

SVG で描画した線を、よ〜く見ると四角くなっている。線の終端は、通常、尻（butt）になっているが、 これを stroke-linecap を使って指定することで、丸く（round）したり、逆に飛び出るように 四角く（square）にしたりできる。
（butt は、米俗語で「尻」だそうだ）

    <line x1="60" y1="40" x2="60" y2="140" stroke-linecap="butt"
        fill="none" stroke="orange" stroke-width="40" />
    <line x1="140" y1="40" x2="140" y2="140" stroke-linecap="round"
        fill="none" stroke="orange" stroke-width="40" />
    <line x1="220" y1="40" x2="220" y2="140" stroke-linecap="square"
        fill="none" stroke="orange" stroke-width="40" />

再び、SVG で描画した線と線の繋ぎの部分をよ〜く見ると、とんがっているように見える。 これは、デフォルトが法冠（miter）になっているからだ。
結合部分も丸く（round）したり、斜め（bevel）にすることができる。

    <polygon points="60,60 40,120, 80,120" fill="none"
        stroke="gray" stroke-width="20" stroke-linejoin="miter"/>
    <polygon points="140,60 120,120, 160,120" fill="none"
        stroke="gray" stroke-width="20" stroke-linejoin="round"/>
    <polygon points="220,60 200,120, 240,120" fill="none"
        stroke="gray" stroke-width="20" stroke-linejoin="bevel"/>

まとめ

簡単に基本図形のタグと属性をまとめてみると次のようになる。

要素（element）	主な属性（attribute）	属性の値
矩形 rect	x, y, width, height	座標と大きさ
円 circle	cx, cy, r	中心座標と半径
楕円 ellipse	cx, cy, rx, ry	中心座標と半径
直線 line	x1, y1, x2, y2	開始点と終了点
多角形 polygone	points	座標の配列
折れ線 polyline	points	座標の配列
共通	fill	塗りつぶし
	stroke, stroke-width	枠線の色と幅
	linecap	線の終端の形状（butt, round, square）
	stroke-linejoin	線の結合部分（miter, round, bevel）

previous