◎SVG要素（タグ）の記述について（その２）
パス（pathタグ）の属性の「d」記述についてまとめて見ました。「d」の値には、以下の命令があります。
命令の後の数値がパラメータとなります。
Mまたはm = moveto
Lまたはl = lineto
Hまたはh = horizontal lineto
Vまたはv = vertical lineto
Cまたはc = curveto
Sまたはs = smooth curveto
Qまたはq = quadratic Bézier curve
Tまたはt = smooth quadratic Bézier curveto
Aまたはa = elliptical Arc
Zまたはz = closepath
（大文字は絶対値、小文字は相対値を表している）
それぞれの意味と定義については、下記の通りです。
１、属性の「d」の値の「Mまたはm」について
意味：パスの開始点を意味します。
例：<path d=”M 10,20 | 100,0″ />
a.「M」の1つ目の数値は開始点のＸ座標の位置を定義しています。
例では、左から10pxを指定しています。
b･「M」の2つ目の数値は開始点のＹ座標の位置を定義しています。
例では、上から20pxを指定しています。
c.｢バーティカルバー｣の1つ目の数値は開始点からＸ軸に移動した距離を定義しています(相対指定)。
例では、開始点から右に100pxの位置を指定しています。
d.｢バーティカルバー｣の2つ目の数値は開始点からＹ軸に移動した距離を定義しています(相対指定)。
例では、開始点から下に0pxの位置を指定しています。
よって例では、座標(10,20)から座標（110,20）までの青色の直線を引いた事になります。
２、属性の「d」の値の「Lまたはl」について
意味：パスの開始点から直線で引かれた終点を意味します。
例：<path d=”M 10,40 L 110,40″ />
a.「L」の1つ目の数値は終点のＸ座標の位置を定義しています。
例では、左から110pxを指定しています。
b･「L」の2つ目の数値は終点のＹ座標の位置を定義しています。
例では、上から40pxを指定しています。
よって例では、座標(10,40)から座標（110,40）までの赤色の直線を引いた事になります。
３、属性の「d」の値の「Hまたはh」について
意味：パスの開始点から直線で引かれた終点を意味します。但し、Ｙ座標は開始点と同じになります。
例：<path d=”M 10,60 H 110″ />
a.「H」の1つ目の数値は終点のＸ座標の位置を定義しています。
例では、左から110pxを指定しています。
よって例では、座標(10,60)から座標（110,60）までの紫色の直線を引いた事になります。
４、属性の「d」の値の「Vまたはv」について
意味：パスの開始点から直線で引かれた終点を意味します。
但し、Ｘ座標は開始点と同じになります。
例：<path d=”M 60,60 V 160″ />
a.「V」の1つ目の数値は終点のＹ座標の位置を定義しています。
例では、左から110pxを指定しています。
よって例では、座標(60,60)から座標（60,160）までの茶色の直線を引いた事になります。
５、属性の「d」の値の「Cまたはc」について
意味：パスで囲まれた範囲（四角形）の中に上弦曲線が描かれます
例：<path d=”M 200,300 C 200,200 300,200 300,300″ />
a.「M」の数値は開始点の座標(200,300)から「C」で指定されている座標(200,200）
(300,200)(200,300)の位置（四角形）の中に上弦曲線を描く定義をしています。
注）Ｙ座標が下から上の順に定義されているので、曲線も下から上の上弦曲線になるが、
滑らかな曲線になる為、指定されたTOP位置まで描けません。
６、属性の「d」の値の「Sまたはs」について
意味：パスの開始点から終点へ中間点の方向にに湾曲された線が描かれます
例：<path d=”M 300,400 S 300,300 400,300″ />
a.「M」の数値は開始点の座標(300,400)から「S」で指定されている終点座標（400,300）
を中間座標(300,300)の方向に湾曲線を描く定義をしています。
よって例では、中間座標(300,300)の対角座標(400,400)を中心に、開始点座標(300,300)から
終点座標(400,300)に４分の１の円を描いています。
７、属性の「d」の値の「Qまたはq」について
意味：パスの開始点から終点へ中間点の方向に上弦された曲線が描かれます
例：<path d=”M 400,500 Q 450,350 500,500″ />
a.「M」の数値は開始点の座標(400,500)から「Q」で指定されている終点座標（500,500）を
中間座標(450,350)の方向に上弦曲線を描く定義をしています。
注)例で言うと、記述上の領域は100X150となりますが、実際の領域は100X100となりますので、
注意する必要があります。
８、属性の「d」の値の「Tまたはt」について
意味：Tを指定している前の命令（QまたはT)の制御点を相対的に複写された線が描かれます
例：<path d=”M 500,600 Q 550,450 600,600 T 700,600″ />
a.「Q」の終点座標(600,600)を開始点として「T」で指定されている終点座標（700,600）を
中間座標(650,750)の方向に下弦曲線を描く定義をしています。
９、属性の「d」の値の「Aまたはa」について
意味：開始点から求められた円と終点から求められた図形の重なった領域を表します
例：<path d=”M 800,750 A 50,50 0 0,0 750,800″ />
a.「M」開始座標となり、円の中心はX軸の半径の距離分引かれた座標が円の中心点となります。
b.「M」開始座標となり、Y軸の円の中心は開始座標と同じになります。
c.「A」一つ目の数値は、X軸の半径となります。
d.「A」二つ目の数値は、Y軸の半径となります。
e.「A」三つ目の数値は、図形の回転率”-360″から”360″を指定します。
「x-axis-rotation」と言います。
f.「A」四つ目の数値は、「0:円弧の短い方」「1:長い方」の２種類の領域を表します。
「large-arc-flag」と言います。
g.「A」五つ目の数値は、「0:半時計回り」「1:時計回り」の2種類の領域を表します。
「sweep-flag」と言います。
h.「A」六つ目の数値は、X軸の終点を表します。
i.「A」七つ目の数値は、Y軸の終点を表します。
注）終点によって領域が異なります。開始点から求められた図形と重ならない終点を指定した場合、
エラーとなり領域は表示しません。「flag」組合せの領域は、サンプルを実行して確認して下さい。
↓以下がテストのソースサンプルです。
▼HTML
<svg> <!-- パス開始点 --> <path d="M 10 20 | 100 0" stroke="blue" stroke-width="2"/> <!-- パス直線定義 --> <path d="M 10 40 L 110 40" stroke="red" stroke-width="2"/> <path d="M 10 60 H 110" stroke="purple" stroke-width="2"/> <path d="M 60 60 V 160" stroke="Brown" stroke-width="2"/> <!-- パス曲線定義 --> <path d="M 200,300 C 200,200 300,200 300,300" stroke="red" stroke-width="2" fill="none" /> <path d="M 300,400 S 300,300 400,300" stroke="yellow" stroke-width="2" fill="none" /> <path d="M 400,500 Q 450,350 500,500" stroke="BLACK" stroke-width="2" fill="none" /> <path d="M 500,600 Q 550,450 600,600 T 700,600" stroke="BLACK" stroke-width="2" fill="none" /> <!-- パス円弧定義 --> <path d="M 800,750 A 50,50 0 0,0 750,800" stroke="red" stroke-width="3" fill="none"/> <path d="M 800,750 A 50,50 0 1,0 750,800" stroke="green" stroke-width="3" fill="none"/> <path d="M 800,750 A 50,50 0 0,1 750,800" stroke="blue" stroke-width="3" fill="none" /> <path d="M 800,750 A 50,50 0 1,1 750,800" stroke="Brown" stroke-width="3" fill="none"/> </svg>
