【SVG】パス

パスとは

これまでの記事では、基本図形としてあらかじめ形の決まった図形を使用していきました。 パスは直線、円弧、曲線を組み合わせることで 1 つの図形を形成します。

パスは<path>要素を用い、直線などの組み合わせパターンをd属性で指定します。 dはdataの略です。

簡単ですが以下が一例になります。

<svg width="100" height="100">
  <path d="M 10 20 L 50 10 L 30 70 Z" fill="none" stroke="black" />
  <path d="M 90 80 L 60 80 L 70 50" fill="none" stroke="black" />
</svg>

例を見ていただくとわかる通り、MやLなどの記号を使用しています。 これらが直線や円弧などのパターンを表す記号となります。 記号の意味については以下より説明していきます。

始点と終端処理

パスでは、最初に始点の座標を指定する必要があります。 指定した座標から直線や曲線を引きます。

始点はMを使用し、M x yで指定します。 上の例の 1 つ目は(10, 20)から、2 つ目は(90, 80)が始点となります。

また例の 1 つ目の最後にはZを指定しています。 これは最後の位置から始点に向かって直線を引く場合に使用します。 そのため図形は完全に閉じられた状態になります。 2 つ目はZを指定していないため、プレビューのような閉じられていない状態になります。

直線

直線は上の例で使用している通りLを指定します。 L x yとすることで、現在の位置から指定した座標に向かって直線を引きます。

上の例の 1 つ目は以下のように描画していることになります。

また特別に水平や垂直に線を引きたい場合には、それぞれH、Vの記号を使用します。 H xは指定した x 座標まで水平の直線を引き、V yは指定した y 座標まで垂直の直線を引きます。

<svg width="100" height="100">
  <path d="M 10 10 H 90 V 60 H 10 Z" fill="none" stroke="black" />
</svg>

円弧

構文

円弧は、2 つの点を楕円の一部を対応させて結ぶ線となります。 その楕円の形状を決める 5 つの値と終点の座標を記号Aで設定することで円弧が描画されます。

よくわからないとは思いますが、以下で各値による描画の確認ができます。 黒色の線が実際に描画される円弧です。灰色の線はイメージをしやすいように描画しています。

円弧で設定する値は以下になります。

• 楕円の x 半径、y 半径
• x-axis-rotation
• large-arc-flag、sweep-flag
• 終点座標 x、y

楕円半径と終点の説明は不要かと思いますので省略します。

x-axis-rotation

x-axis-rotationは、x 軸を回転させることで楕円を回転させます。 このとき、楕円を形成する 2 点は必ず通るように大きさが変化します。

以下が回転のイメージです。 基準となる楕円（黒）に対し、45 度回転した楕円（青）と 90 度回転した楕円（赤）になります。

当然ですが、x 半径と y 半径が同じ場合、つまり円の場合は回転しても変わりません。

<svg width="100" height="100" style="background: #ddd">
  <path
    d="M 0 50 H 10 A 10,15 0 0,0 40,50 H 60 A 10,15, 45 1,0 90,50 H 100"
    fill="none"
    stroke="black" />
</svg>

large-arc-flag

まずは以下の図を見てください。

2 点を通る楕円を作成した時、青線と赤線のように 2 つの円弧ができます。 このどちらを選ぶのかというのがlarge-arg-flagです。 0が円弧の長さが短い方（青）、1が長い方（赤）になります。 円弧が描画される方向は変わりません。

<svg width="100" height="100">
  <path
    d="M 0 50 H 10 A 20,20 0 0,0 40,50 H 60 A 20,20, 0 1,0 90,50 H 100"
    fill="none"
    stroke="black" />
</svg>

sweep-flag

sweep-flagは、終点に向かって円弧を描画するときに、時計回り（1）か反時計回りか（0）を設定します。 結局のところ、円弧が描画される向きが変わります。

<svg width="100" height="100">
  <path
    d="M 0 50 H 10 A 10,10 0 0,0 40,50 H 60 A 10,10, 15 0,1 90,50 H 100"
    fill="none"
    stroke="black" />
</svg>

曲線

ベジェ曲線について

ベジェ曲線は、基本となる 2 点で構成される直線に対し、制御点を与えることで曲線を生成します。 この記事ではベジェ曲線について深く言及しません。

SVG では、制御点が 1 つの二次ベジェ曲線、制御点が 2 つの三次ベジェ曲線を利用できます。

二次ベジェ曲線

二次ベジェ曲線は、上述したように基本の 2 点に対して制御点を 1 つ与えることで曲線を作成します。 細かな話は割愛しますが、動きがわかるように、以下にサンプルを置いておきます。

二次ベジェ曲線は、Qを記号として使用します。 指定する値は、制御点の座標と終点の座標です。

<svg width="100" height="100">
  <path d="M 10 50 Q 50 5 90 50" fill="none" stroke="black" />
</svg>

二次ベジェ曲線にはもう 1 つTを使用するものがあります。 Tは直前が曲線の場合に使用でき、値として終点を指定します。 Tの制御点は、直前の曲線の制御点を、Tの開始座標を中心として点対象としたものになります。 上のサンプルでは、赤点を中心として青点を点対象とした緑点がTの制御点となります。

三次ベジェ曲線

三次ベジェ曲線は、制御点を 2 つ与えることで曲線を作成します。 二次ベジェ曲線と同じようにサンプルを置いておきます。

三次ベジェ曲線は、Cを記号として使います。指定する値は、2 つの制御点の座標と終点の座標です。

<svg width="200" height="100">
  <path
    d="M 10 50 C 50 5 150 5 190 50"
    fill="none"
    stroke="black" />
</svg>

三次ベジェ曲線でも、二次ベジェ曲線のTと同じようなSという記号があります。 Sは値として、2 つ目の制御点の座標と終点の座標を指定します。

1 つ目の制御点は、直前の曲線の最後の制御点を、Sの開始座標を中心として点対象としたものになります。 上のサンプルでは緑点が該当します。

<svg width="200" height="100">
  <path
    d="M 10 50 C 25 5 75 5 100 50 S 175 95 190 50"
    fill="none"
    stroke="black" />
</svg>

相対位置指定

これまで説明していきたパスの記号はLなどの大文字でしたが、lのように小文字で指定することができます。 大文字は実際の座標位置、つまり絶対位置を指定していました。 一方小文字は相対位置を指定します。

<svg width="100" height="100">
  <path d="M 10 20 l 40 -10 l -20 60 Z" fill="none" stroke="black" />
  <path d="M 90 80 l -40 0 l 10 -30" fill="none" stroke="black" />
</svg>