パスデータ(path data)は、どのような図形を描くのかを指定します。
path要素ではd属性の値になります。
パスデータは、いくつかの命令とパラメータの組み合わせで表現されます。
命令には、
moveto(移動する)
lineto(まっすぐな線を描く)
curveto(2次または3次ベジェ曲線を描く)
closepath(閉じる)
があります。
パラメータは、それぞれの命令の直後に必要な数だけ記述します。
また、パスデータを記述する際に必要なデータ量を減らすために、余分な区切り文字を省略する、同じ命令が繰り返す場合は2つめ以降の命令を省略する、といったことも可能です。
moveto命令は、図形を描くためのペン(のようなもの)の位置を描く図形の始点に移動します。移動した先が現在の点になります。
moveto命令は、Mあるいはmによって表されます。
パスデータは必ずmoveto命令から始まります。つまり、最初の文字はM(あるいはm)ということです。
パラメータとして、移動先の座標を指定します。Mの場合は絶対座標を、mの場合は現在の点からの相対座標を指定します。
例えば、
"M50,50"
のように書けば、(50,50)に移動することを表します。
また、
"m50,50"
のように書けば、現在の点からx方向に50、y方向に50移動した座標に移動することを表します。現在の点が(10,10)なら(60,60)に移動します。パスデータの先頭がmだった場合には、パラメータは絶対座標として扱います。パスデータが、
"m50,50m50,50"
であった場合、1つめの"m50,50"は(50,50)に移動することを表し、2つめの"m50,50"は(100,100)に移動する(現在の点が(50,50))ことを表します。
M(m)の直後に複数の座標が続いた場合は、2つめ以降の座標は、その座標へ移動するのではなく，その座標までまっすぐな線を描くものとして扱われます。
例えば、
"M50,50 100,100"
のように書けば、(50,50)に移動し、その後(100,100)へ移動するのではなく、(50,50)に移動し、そこから(100,100)へまっすぐな線を描くことを表します。
lineto命令は、現在の点を始点として指定した点を終点とするまっすぐな線を描きます。終点が現在の点になります。
lineto命令は、Lあるいはlによって表されます。x軸に平行な線を描く場合はHあるいはhによって、y軸に平行な線を描く場合はVあるいはvによって表すこともできます。
パラメータとして、終点となる座標を指定します。Lあるいはlの場合はx座標とy座標、Hあるいはhの場合はx座標、Vあるいはvの場合はy座標を指定します。L、HおよびVの場合は絶対座標を、l、hおよびvの場合は現在の点からの相対座標を指定します。複数の座標が指定された場合にはそれらを順につなぐ折れ線が描かれます(H、h、Vおよびvの場合は見た目には分からないのですが)。
例えば、
"M50,50L100,50"
のように書けば、(50,50)に移動し、そこから(100,50)へまっすぐな線を描くことを表します。同じ図形を表すには
"M50,50H100"
のように書くこともできます。
closepath命令は、現在の点から図形の始点までをまっすぐな線で結び、始点の位置で結合します。始点の位置が現在の点になります。
closepath命令は、Zあるいはzによって表されます。
パラメータはありません。
例えば、
M10,10L50,50 90,10Z"
のように書けば、(10,10)(50,50)(90,10)(10,10)を順にまっすぐな線で結んだ三角形が描かれます。
closepath命令を利用した場合と、始点までのlineto命令を利用した場合では、始点(および終点)の形が異なります。
例えば、
"M10,10L50,50 90,10Z"
のように書けば、(10,10)は接続点となりstroke-linejoin属性の値に従った形になります。一方、
"M10,10L50,50 90,10 10,10"
のように書けば、(10,10)は端点となりstroke-linecap属性の値に従った形になります。
curveto命令は、現在の点を始点として指定した点を終点とする2次あるいは3次ベジェ曲線を描きます。終点が現在の点になります。
3次ベジェ曲線を描くcurveto命令は、Cあるいはcによって表されます。直前のコマンドから第一制御点を求める場合は、Sあるいはsによって表すこともできます。
パラメータとして、第一制御点の座標、第二制御点の座標、終点の座標を指定します。Sあるいはsの場合は、第二制御点の座標、終点の座標を指定します。CおよびSの場合は絶対座標を、cおよびsの場合は現在の点からの相対座標を指定します。複数のベジェ曲線のパラメータが指定された場合にはそれらのベジェ曲線を順につないだ曲線が描かれます。
例えば、
"M50,100 C100,50 150,50 200,100 250,150 300,150 350,100"
のように書けば、(50,100)を始点、(100,50)を第一制御点、(150,50)を第二制御点、(200,100)を終点とする3次ベジェ曲線と(200,100)を始点、(250,150)を第一制御点、(300,150)を第二制御点、(350,100)を終点とする3次ベジェ曲線をつないだ曲線を描くことを表します。同じ図形を表すには
"M50,100 C100,50 150,50 200,100 S300,150 350,100"
のように書くこともできます。
2次ベジェ曲線を描くcurveto命令は、Qあるいはqによって表されます。直前のコマンドから制御点を求める場合は、Tあるいはtによって表すこともできます。
パラメータとして、制御点の座標、終点の座標を指定します。Tあるいはtの場合は、終点の座標を指定します。QおよびTの場合は絶対座標を、qおよびtの場合は現在の点からの相対座標を指定します。複数のベジェ曲線のパラメータが指定された場合にはそれらのベジェ曲線を順につないだ曲線が描かれます。
path要素ではd属性の値になります。
パスデータは、いくつかの命令とパラメータの組み合わせで表現されます。
命令には、
moveto(移動する)
lineto(まっすぐな線を描く)
curveto(2次または3次ベジェ曲線を描く)
closepath(閉じる)
があります。
パラメータは、それぞれの命令の直後に必要な数だけ記述します。
また、パスデータを記述する際に必要なデータ量を減らすために、余分な区切り文字を省略する、同じ命令が繰り返す場合は2つめ以降の命令を省略する、といったことも可能です。
moveto命令は、図形を描くためのペン(のようなもの)の位置を描く図形の始点に移動します。移動した先が現在の点になります。
moveto命令は、Mあるいはmによって表されます。
パスデータは必ずmoveto命令から始まります。つまり、最初の文字はM(あるいはm)ということです。
パラメータとして、移動先の座標を指定します。Mの場合は絶対座標を、mの場合は現在の点からの相対座標を指定します。
例えば、
"M50,50"
のように書けば、(50,50)に移動することを表します。
また、
"m50,50"
のように書けば、現在の点からx方向に50、y方向に50移動した座標に移動することを表します。現在の点が(10,10)なら(60,60)に移動します。パスデータの先頭がmだった場合には、パラメータは絶対座標として扱います。パスデータが、
"m50,50m50,50"
であった場合、1つめの"m50,50"は(50,50)に移動することを表し、2つめの"m50,50"は(100,100)に移動する(現在の点が(50,50))ことを表します。
M(m)の直後に複数の座標が続いた場合は、2つめ以降の座標は、その座標へ移動するのではなく，その座標までまっすぐな線を描くものとして扱われます。
例えば、
"M50,50 100,100"
のように書けば、(50,50)に移動し、その後(100,100)へ移動するのではなく、(50,50)に移動し、そこから(100,100)へまっすぐな線を描くことを表します。
lineto命令は、現在の点を始点として指定した点を終点とするまっすぐな線を描きます。終点が現在の点になります。
lineto命令は、Lあるいはlによって表されます。x軸に平行な線を描く場合はHあるいはhによって、y軸に平行な線を描く場合はVあるいはvによって表すこともできます。
パラメータとして、終点となる座標を指定します。Lあるいはlの場合はx座標とy座標、Hあるいはhの場合はx座標、Vあるいはvの場合はy座標を指定します。L、HおよびVの場合は絶対座標を、l、hおよびvの場合は現在の点からの相対座標を指定します。複数の座標が指定された場合にはそれらを順につなぐ折れ線が描かれます(H、h、Vおよびvの場合は見た目には分からないのですが)。
例えば、
"M50,50L100,50"
のように書けば、(50,50)に移動し、そこから(100,50)へまっすぐな線を描くことを表します。同じ図形を表すには
"M50,50H100"
のように書くこともできます。
closepath命令は、現在の点から図形の始点までをまっすぐな線で結び、始点の位置で結合します。始点の位置が現在の点になります。
closepath命令は、Zあるいはzによって表されます。
パラメータはありません。
例えば、
M10,10L50,50 90,10Z"
のように書けば、(10,10)(50,50)(90,10)(10,10)を順にまっすぐな線で結んだ三角形が描かれます。
closepath命令を利用した場合と、始点までのlineto命令を利用した場合では、始点(および終点)の形が異なります。
例えば、
"M10,10L50,50 90,10Z"
のように書けば、(10,10)は接続点となりstroke-linejoin属性の値に従った形になります。一方、
"M10,10L50,50 90,10 10,10"
のように書けば、(10,10)は端点となりstroke-linecap属性の値に従った形になります。
curveto命令は、現在の点を始点として指定した点を終点とする2次あるいは3次ベジェ曲線を描きます。終点が現在の点になります。
3次ベジェ曲線を描くcurveto命令は、Cあるいはcによって表されます。直前のコマンドから第一制御点を求める場合は、Sあるいはsによって表すこともできます。
パラメータとして、第一制御点の座標、第二制御点の座標、終点の座標を指定します。Sあるいはsの場合は、第二制御点の座標、終点の座標を指定します。CおよびSの場合は絶対座標を、cおよびsの場合は現在の点からの相対座標を指定します。複数のベジェ曲線のパラメータが指定された場合にはそれらのベジェ曲線を順につないだ曲線が描かれます。
例えば、
"M50,100 C100,50 150,50 200,100 250,150 300,150 350,100"
のように書けば、(50,100)を始点、(100,50)を第一制御点、(150,50)を第二制御点、(200,100)を終点とする3次ベジェ曲線と(200,100)を始点、(250,150)を第一制御点、(300,150)を第二制御点、(350,100)を終点とする3次ベジェ曲線をつないだ曲線を描くことを表します。同じ図形を表すには
"M50,100 C100,50 150,50 200,100 S300,150 350,100"
のように書くこともできます。
2次ベジェ曲線を描くcurveto命令は、Qあるいはqによって表されます。直前のコマンドから制御点を求める場合は、Tあるいはtによって表すこともできます。
パラメータとして、制御点の座標、終点の座標を指定します。Tあるいはtの場合は、終点の座標を指定します。QおよびTの場合は絶対座標を、qおよびtの場合は現在の点からの相対座標を指定します。複数のベジェ曲線のパラメータが指定された場合にはそれらのベジェ曲線を順につないだ曲線が描かれます。