<path d="path data" style="style data" />
| 名称 | 意味 | コマンド | パラメタ | 備考 |
|---|---|---|---|---|
| 移動 moveto |
現在点を移動するのみ。線は引かない。 | M | x y | 絶対座標 |
| m | x y | 相対座標 | ||
| パスを閉じる closepath |
現在点から開始点まで、直線を引く。 | Z | 無し | |
| z | 無し | |||
| 直線を引く lineto |
現在点から指定点まで直線を引く。 | L | x y | 絶対座標 |
| l | x y | 相対座標 | ||
| 水平線を引く horizontal lineto |
現在点から指定点まで水平線を引く。 | H | x | 絶対座標 |
| h | x | 相対座標 | ||
| 垂直線を引く vertical lineto |
現在点から指定点(x y)まで垂直線を引く。 | V | y | 絶対座標 |
| v | y | 相対座標 | ||
| 曲線を引く curveto |
現在点から指定点(x y)まで曲線を引く。x1 y1は、現在点(開始点)の制御点。x2 y2は、指定点(終点)の制御点。 | C | x1 y1 x2 y2 x y | 絶対座標 |
| c | x1 y1 x2 y2 x y | 相対座標 | ||
| 曲線を引く shorthand/smooth curveto |
現在点から指定点(x y)まで曲線を引く。x2 y2は、指定点(終点)の制御点。現在点の制御は、直前に引いた曲線の終点の制御点で行う。これにより２つの曲線をスムーズに結合する。 | S | x2 y2 x y | 絶対座標 |
| s | x2 y2 x y | 相対座標 | ||
| 曲線を引く quadratic Bezier curveto |
現在点から指定点(x y)まで曲線を引く。x1 y1は、開始点と指定点(終点)共通の制御点。 | Q | x1 y1 x y | 絶対座標 |
| q | x1 y1 x y | 相対座標 | ||
| 曲線を引く shorthand/smooth quadratic Bezier curveto |
現在点から指定点(x y)まで曲線を引く。 | T | x y | 絶対座標 |
| t | x y | 相対座標 | ||
| 楕円曲線を引く shorthand/smooth quadratic Bezier curveto |
現在点から指定点(x y)まで楕円形の曲線を引く。楕円は２つの半径(rx ry)と軸の回転(x-axis-rotation)で定義する。 現在点と指定点を通過する楕円の配置は２通りあり、それをlarge-arc-flagで選択する。 楕円のうちどちら側の円弧を描画するかを、sweep-flagで選択する。 large-arc-flagとsweep-flagには、0又は1を指定する。 |
A | rx ry x-axis-rotation large-arc-flag sweep-flag x y |
絶対座標 |
| a | rx ry x-axis-rotation large-arc-flag sweep-flag x y |
相対座標 |
|
<path d="M10 60 L 60 100 L 60 20 L 110 60" style="fill:none; stroke:black; stroke-width:1" /> |
|
<path d="M10 60 M 60 100 L 60 20 L 110 60" style="fill:none; stroke:black; stroke-width:1" /> |
|
<path d="M50 60 m 50 40 l 0 -80 l 50 40" style="fill:none; stroke:black; stroke-width:1" /> |
|
<path d="M10 60 M 60 100 L 60 20 L 110 60 z" style="fill:none; stroke:black; stroke-width:1" /> |
|
<path d="M10 60 L 60 100 L 60 20 L 110 60 z"
style="fill:none; stroke:black; stroke-width:1" /> |
|
<path d="M50 60 H 150 V 100 h -50 v -80"
style="fill:none; stroke:black; stroke-width:1" /> |
|
<path d="M50 60 C 50 10 100 10 100 60 C 100 110 150 110 150 60 C 190 60 190 10 150 10"
style="fill:none; stroke:black; stroke-width:2" /> <path d="M50 10 L 50 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M100 10 L 100 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M100 110 L 100 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M150 110 L 150 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M190 60 L 150 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M190 10 L 150 10" style="fill:none; stroke:red; stroke-width:1" /> |
図中の赤い線は補助線。制御点から、制御点が作用している描画開始点及び終了点まで引いている。Cコマンドによって描画される線ではない。
|
<path d="M50 60 C 50 10 100 10 100 60 S 150 110 150 60 S 190 10 150 10"
style="fill:none; stroke:black; stroke-width:2" /> <path d="M50 10 L 50 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M100 10 L 100 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M150 110 L 150 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M190 10 L 150 10" style="fill:none; stroke:red; stroke-width:1" /> |
|
<path d="M50 60 C 50 10 100 10 100 60 S 125 110 150 60 S 190 10 150 10"
style="fill:none; stroke:black; stroke-width:2" />< <path d="M50 10 L 50 60" style="fill:none; stroke:red; stroke-width:1" />< <path d="M100 10 L 100 60" style="fill:none; stroke:red; stroke-width:1" />< <path d="M125 110 L 150 60" style="fill:none; stroke:red; stroke-width:1" />< <path d="M190 10 L 150 10" style="fill:none; stroke:red; stroke-width:1" />< |
図中の赤い線は補助線。制御点から、制御点が作用している描画開始点及び終了点まで引いている。Sコマンドによって描画される線ではない。
|
<path d="M50 60 Q 75 40 100 60 Q 125 110 150 60 Q 190 35 150 10"
style="fill:none; stroke:black; stroke-width:2" /> <path d="M50 60 L 75 40 L 100 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M100 60 L 125 110 L 150 60" style="fill:none; stroke:red; stroke-width:1" /> <path d="M150 60 L 190 35 L 150 10" style="fill:none; stroke:red; stroke-width:1" /> |
図中の赤い線は補助線。制御点から、制御点が作用している描画開始点及び終了点まで引いている。Qコマンドによって描画される線ではない。
|
<path d="M50 60 Q 75 40 100 60 T 150 60 T 150 10"
style="fill:none; stroke:black; stroke-width:2" /> <path d="M50 60 L 75 40 L 100 60" style="fill:none; stroke:red; stroke-width:1" /> |
図中の赤い線は補助線。制御点から、制御点が作用している描画開始点及び終了点まで引いている。Tコマンドによって描画される線ではない。
楕円の大きさ傾きを固定した場合、２点を通過する配置は２通りある（下図）。また、２点を繋ぐ線も、２通りある（下図の黒線、赤線）。合わせて４通りから描画パターンを選択する。
|
<path d="M20 60 L 70 60 A 25 40 30 1 1 120 60 T 180 60"
style="fill:none; stroke:black; stroke-width:2" /> <path d="M20 60 L 70 60 A 25 40 30 0 0 120 60 T 180 60" style="fill:none; stroke:red; stroke-width:1" /> |
|
<path d="M20 60 L 70 60 A 25 40 30 0 1 120 60 T 180 60"
style="fill:none; stroke:black; stroke-width:2" /> <path d="M20 60 L 70 60 A 25 40 30 1 0 120 60 T 180 60" style="fill:none; stroke:red; stroke-width:1" /> |