線分や曲線がつながった任意の線のパス(経路)は<path>要素を使って描きます。点を表す座標のペアで描くポリラインを指定します。
このときのデータは、<path>要素のd(data)属性にコマンドと座標ペアで指定します。
コマンドは、「M x y」とすると「move to x,y」と解釈されてパスの始点が(x,y)に移動します。
「L x y」とすると「line to x,y」と解釈されてパスのひとつ前の点から(x,y)に線が引かれます。
例えば、次の例は、(20,20)に移動(M)して、(80,20)に線を描き(L)ます。
<path d="M 20 20 L 80 20" />
<path>要素に指定可能な主な属性を次の表に示します。
名前 | 意味 | 属性値の例 |
---|---|---|
d | パスのデータ | 80, 20, 90, 50, 70, 50, 80, 20 |
stroke | 線の色 | blue,red |
stroke-width | 線の太さ | 1px |
fill | 閉じた領域の場合の塗り潰し色 | none(塗り潰さない)、gray |
パスを表現するためのペン移動のコマンドを次の表に示します。
コマンド | 意味 | |
---|---|---|
M | 絶対座標で指定された位置にペンを移動する | |
m | 相対座標で指定された位置にペンを移動する | |
L | 絶対座標で指定された位置まで直線を描く | |
l | 相対座標で指定された位置まで直線を描く | |
Z | パスの開始点まで直線を描いてパスを閉じる | |
H | 絶対座標で指定された距離まで水平に直線を描く(Y軸の値は変わらない) | |
h | 相対座標で指定された距離まで水平に直線を描く(Y軸の値は変わらない) | |
V | 絶対座標で指定された距離まで垂直に直線を描く(X軸の値は変わらない) | |
v | 相対座標で指定された距離まで垂直に直線を描く(X軸の値は変わらない) | |
A | 絶対座標で指定された楕円を描く | |
a | 相対座標で指定された楕円を描く |
MやLコマンドのような位置座標を指定するコマンドの値はxとyのペアでなければなりません。
d="M 20 20 L 80 20 50 40"
この、区切り文字は空白でも「,」でも良いので次に示す<path>要素のd属性のように「,」を利用するとわかりやすくなります。
d="M 20,20 L 80,20 50,40"
このデータは次のような線を表します。
HやVなどの距離を指定するコマンドの場合はコマンドの後に指定する値はひとつだけです。
<!--- (20, 20)の位置から水平に20、垂直に30の長さの直線を描く -->
d="M 20 20 H 40 V 50"
最初の位置が(20, 20)なので、水平に20進んだところは(40,20)そこからさらに下に30進んだところは(40, 50)になる点に注意してください。
同じことを相対座標で指定する時は、小文字のコマンドを使います。
<!--- (20, 20)の位置から水平に20、垂直に30の長さの直線を描く -->
d="M 20 20 h 20 v 30"
このデータは次のような線を表します。
楕円にはA(またはa)コマンドの後に次の7個の値を指定します。
(x半径) (y半径) (回転角) (楕円弧の大きさ) (スイープ) (終点のx座標) (終点のy座標)
(楕円弧の大きさ)には、楕円弧の角度が180度未満なら0、180度以上なら1を指定します。 (スイープ)には、楕円弧を負の角度方向に描くなら0を指定し、正の角度方向に描くなら1を指定します。
たとえば、次のようなデータを定義します。
d="M 20,20 A 60,50 0 0,1 60,40"
このデータは次のような楕円弧線を表します。
パスをつなぐ曲線を描くときには、<path>要素のd属性の始点以降の座標にQまたはCを指定します。 Qを指定すると二次ベジェ曲線になり、Cを指定すると三次ベジェ曲線になります。
ベジェ曲線でパスを表現するためのペン移動のコマンドを次の表に示します。
コマンド | 意味 | 書式 |
---|---|---|
Q | 絶対座標で制御点(x1, y1)を使って現在の点から(x,y)まで二次ベジェ曲線を描く | Q x1 y1 x y |
q | 相対座標で制御点(x1, y1)を使って現在の点から(x,y)まで二次ベジェ曲線を描く | q x1 y1 x y |
T | 絶対座標で現在の点から(x,y)まで二次ベジェ曲線を描く | T x y |
t | 相対座標で現在の点から(x,y)まで二次ベジェ曲線を描く | t x y |
C | 絶対座標で制御点(x1, y1)と(x2,y2)を使って現在の点から(x,y)まで三次ベジェ曲線を描く | C x1 y1 x2 y2 x y |
c | 相対座標で制御点(x1, y1)と(x2,y2)を使って現在の点から(x,y)まで三次ベジェ曲線を描く | c x1 y1 x2 y2 x y |
S | 絶対座標で制御点(x2,y2)を使って現在の点から(x,y)まで三次ベジェ曲線を描く | S x2 y2 x y |
s | 相対座標で制御点(x2,y2)を使って現在の点から(x,y)まで三次ベジェ曲線を描く | s x2 y2 x y |
閉じたポリラインはfill属性に指定した色で塗り潰すことができます。
次の例は3本のポリラインを描くコードの例です。
<svg width="300" height="200" stroke="black" stroke-width="1px" style="fill:none">
<!--- 直線 -->
<path d="M 10,10 L 40,40 80,20 140,10" />
<!--- 二次ベジェ曲線 -->
<path d="M 10,60 Q 30,90 40,90 Q 50 80 80,70 Q 100,110 140,60 Q 150,65" />
<!--- 三次ベジェ曲線 -->
<path d="M 10,110 C 30,140 40,140 50,130 80,120 100,160 140,110 150,115" />
</svg>
このコードで次のように表示されます。