path

path要素は、図形を描く際に使われます。

path要素によって、いくつかの点を直線やベジエ曲線で結んだ図形が描かれます。
パラメータとして、描かれる図形の輪郭と輪郭の長さを指定します。

図形の輪郭を指定する属性がdです。d属性には、移動や線を描くための命令が含まれます。

例えば、
<path d="M10,10L100,100" stroke="#000000" fill="none"/>
のように書けば、(10,10)に移動し、そこから(100,100)までまっすぐな線を描くことを表します。
結果として(10,10)から(100,100)までを結ぶ線分が描かれます。

d属性が指定されない場合は、命令が1つも指定されなかったものとして扱われます。命令が1つも指定されなかった場合は、その図形は描画されません。
pathLength属性が指定された場合は、ユーザエージェントが求めた輪郭の長さが調整されます。指定されない場合には、調整は行われません。また、負の値を指定してはいけません。

polygon

polygon要素は、多角形を描く際に使われます。

polygon要素によって、いくつかの頂点を順にまっすくな線で結んでいき最後に閉じた多角形が描かれます。
閉じることにより、最後の頂点から最初の頂点までがまっすぐな線で結ばれ最初の頂点の位置で結合されます。
パラメータとして、順に結んでいく頂点の座標を、1つめの頂点のx座標、1つめの頂点のy座標、2つめの頂点のx座標、2つめの頂点のy座標・・・の順で指定します。

頂点の集合を指定する属性がpointsです。

例えば、
<polyline points="10,10 50,50 90,10" stroke="#000000" fill="none"/>
のように書けば、(10,10)(50,50)(90,10)(10,10)を順にまっすぐな線で結んだ多角形が描かれます。

points属性が指定されない場合は、頂点が1つも指定されなかったものとして扱われます。頂点が1つも指定されなかった場合は、その多角形は描画されません。また、それぞれの頂点はx座標の値とy座標の値によって指定されますので、どちらか一方だけ指定することはできません。points属性で指定される座標の数が奇数だった場合、すなわち、全ての頂点についてx座標とy座標が指定されていない場合は、points属性が指定されていないものとして扱われます。

polyline

polyline要素は、折れ線を描く際に使われます。

polyline要素によって、いくつかの頂点を順にまっすくな線で結んだ折れ線が描かれます。
パラメータとして、順に結んでいく頂点の座標を、1つめの頂点のx座標、1つめの頂点のy座標、2つめの頂点のx座標、2つめの頂点のy座標・・・の順で指定します。

頂点の集合を指定する属性がpointsです。

例えば、
<polyline points="10,10 50,50 90,10" stroke="#000000" fill="none"/>
のように書けば、(10,10)(50,50)(90,10)を順にまっすぐな線で結んだ折れ線が描かれます。

points属性が指定されない場合は、頂点が1つも指定されなかったものとして扱われます。頂点が1つも指定されなかった場合は、その折れ線は描画されません。また、それぞれの頂点はx座標の値とy座標の値によって指定されますので、どちらか一方だけ指定することはできません。points属性で指定される座標の数が奇数だった場合、すなわち、全ての頂点についてx座標とy座標が指定されていない場合は、points属性が指定されていないものとして扱われます。

ellipse

ellipse要素は、楕円を描く際に使われます。

ellipse要素によって、2つの半径がそれぞれx軸とy軸に平行な楕円が描かれます。
パラメータとして、中心点と2つの半径を指定します。
楕円は、x座標の値が一番大きな点(x軸が水平方向、y軸が垂直方向の場合は、時計でいうと3時の位置)→y座標の値が一番大きな点(6時の位置)→x座標の値が一番小さな点(9時の位置)→y座標の値が一番小さな点(12時の位置)→x座標の値が一番大きな点の順(時計回りに一周)に描かれます。

中心点のx座標を指定する属性がcx、y座標を指定する属性がcyです。
x軸方向の半径を指定する属性がrx、y軸方向の半径を指定する属性がryです。

例えば、
<ellipse cx="50" cy="50" rx="50" ry="40" stroke="#000000" fill="none"/>
のように書けば、x軸方向の半径50、y軸方向の半径40の楕円が描かれます。

cx属性およびcy属性は指定されない場合は0として扱われます。すなわち、中心点のx座標(あるいはy座標)が0ということです。
rx属性およびry属性は指定されない場合は0として扱われます。どちらかに0が指定された場合は、その楕円は描画されません。また、負の値を指定してはいけません。

circle

circle要素は、円を描く際に使われます。

circle要素によって、円が描かれます。
パラメータとして、中心点と半径を指定します。
円は、x座標の値が一番大きな点(x軸が水平方向、y軸が垂直方向の場合は、時計でいうと3時の位置)→y座標の値が一番大きな点(6時の位置)→x座標の値が一番小さな点(9時の位置)→y座標の値が一番小さな点(12時の位置)→x座標の値が一番大きな点の順(時計回りに一周)に描かれます。

中心点のx座標を指定する属性がcx、y座標を指定する属性がcyです。
半径を指定する属性がrです。

例えば、
<circle cx="50" cy="50" r="50" stroke="#000000" fill="none"/>
のように書けば、中心点が(50,50)、半径50の円が描かれます。

cx属性およびcy属性は指定されない場合は0として扱われます。すなわち、中心点のx座標(あるいはy座標)が0ということです。
r属性は指定されない場合は0として扱われます。0が指定された場合は、その円は描画されません。また、負の値を指定してはいけません。

line

line要素は、線分を描く際に使われます。

line要素によって、2つの点を結ぶ線分が描かれます。
パラメータとして、始点と終点を指定します。
単に線を描くだけであればどちらが始点でどちらが終点であっても関係ないのですが、矢印のようなものを描く場合にはどちらが始点でどちらが終点であるかが重要です。

始点のx座標を指定する属性がx1、y座標を指定する属性がy1です。
終点のx座標を指定する属性がx2、y座標を指定する属性がy2です。

例えば、
<line x1="10" y1="10" x2="100" y2="100" stroke="#000000" fill="none"/>
のように書けば、(10,10)から(100,100)までを結ぶ線分が描かれます。

line要素には内部というものがありませんので、stroke属性を指定しない、あるいは"none"と指定した場合は何も描かれません。(と思うのですが、表示ソフトウェアによっては、fill属性の値を薄くした色の線が見えたりします。いったいどこを塗っているのだろう．．．)

x1属性およびy1属性は指定されない場合は0として扱われます。すなわち、始点のx座標(あるいはy座標)が0ということです。
同様に、x2属性およびy2属性は指定されない場合は0として扱われます。すなわち、終点のx座標(あるいはy座標)が0ということです。
x1属性、y1属性、x2属性およびy2属性が全て指定されない場合は、(0,0)から(0,0)を結ぶことになります。(おそらく何も描かれないかと)

rect

rect要素は、矩形を描く際に使われます。

rect要素によって、2つの辺がx軸と平行、残り2つの辺がy軸と平行な矩形が描かれます。
パラメータとして、左上の頂点(x軸y軸ともに値の小さくなる頂点)と幅、高さを指定します。
また、角を丸めることもできます。角を丸める場合には、x軸方向とy軸方向の半径を指定します。
矩形は、左上の頂点→右上の頂点→右下の頂点→左下の頂点→左上の頂点の順に描かれます。

左上の頂点のx座標を指定する属性がx、y座標を指定する属性がyです。
幅を指定する属性がwidth、高さを指定する属性がheightです。
また、角を丸める場合にx軸方向の半径を指定する属性がrx、y軸方向の半径を指定する属性がryです。

例えば、
<rect x="10" y="10" width="200" height="100" stroke="#000000" fill="none"/>
のように書けば、左上の頂点が(10,10)、幅200、高さ100の矩形が描かれます。
また、
<rect x="10" y="10" width="200" height="100" rx="30" ry="20" stroke="#000000" fill="none"/>
のように書けば、左上の頂点が(10,10)、幅200、高さ100、x軸方向の半径30、y軸方向の半径20で角をまるめる矩形が描かれます。

x属性およびy属性は指定されない場合は0として扱われます。すなわち、左上の頂点のx座標(あるいはy座標)が0ということです。
width属性およびheight属性は必ず指定する必要があります。どちらかを0にすると何も描画されません。また、負の値を指定してはいけません。
rx属性およびry属性はどちらも指定されない場合は0として扱われます。角は丸められないということです。
どちらか一方だけ指定された場合は、もう一方も同じ値が指定されたものとして扱われます。rxとryの値が等しいものとして角が丸められます。
rx属性の値がwidth属性の値の半分よりも大きな値だった場合は、width属性の半分の値として扱われます。同様に、ry属性の値がheight属性の値の半分よりも大きな値だった場合は、height属性の半分の値として扱われます。