多角形(polygon, polyline)
多角形を描くには、polygon と polyline の2つが用意されている。
どちらも塗りつぶし(fill)ができるが、2つのタグの違いは、
開始点と終了点が自動的につながるのが 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)を使って、3点分指定しているが、polygon の場合は最初と最後が
つながっているが、polyline の場合には線はつながらない。ただし、塗りつぶし(fill)は、
されるので、ほとんど違いがないといえば違いがない。
おそらく、polygon は、3次元の多角形を作るときに使い、polyline は折れ線グラフのような
2次元的なグラフィックに使うのではないだろうか。
また、直線と曲線を同時に描く 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