SVG<path>パス

path要素は形状を定義する一般的な要素です。すべての基本的な形状はpath要素で作成できます。SVG <path>要素は、直線、円弧、曲線などで構成された高度な形状を描画し、塗りつぶしを含むまたは含まないことができます。この <path>要素は、すべての要素の中で最も進んだ、最も一般的なSVG形状である可能性があります。また、最も難しい要素である可能性もあります。

SVG オンラインエディタ -　 オンラインでSVGを編集し、SVGからソースコードに変換できます

パス例

SVG <path> 簡単な例:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50
　　　　　　　　　　　　　A30,30　0　0,1　35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>　　　　
</svg>

実行後の結果は以下の通りです：

画像が円弧と直線を含んでいることや、第二の直線が第一の円弧と直線に接続されていないことを注意してください。

すべての<path>要素を持つ描画は、d属性で指定されます。d属性には描画コマンドが含まれています。上の例では、Mは「Move to」（移動する）コマンドを示し、Aは「Arc」（円弧）コマンドを示し、Lは「Line」（直線）コマンドを示します。これらのコマンドは「仮想筆」に提供されます。この筆は移動したり、形状を描画したりすることができます。

ペンを設定および移動

<path>属性の最初の描画コマンドは常にmoveコマンドでなければなりません。何かを描画する前に、仮想筆をどこかに移動する必要があります。これはMコマンドで行われます。以下はシンプルな例です：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

この例では、仮想筆を50,50ポイント。次の描画コマンドはそのポイントから始まります。

ライン

線を描画するのは、<path>要素に対して最もシンプルなコマンドです。Lとl（小文字のL）コマンドを使用して線を描画します：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50　　　　　　　　　　　　　L100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

この例では、ポイント50,50（Mコマンドのポイント）からポイント100,100（Lコマンドのポイント）に線を描画します。実行後の画像効果：

Lとlコマンドの違いは、大文字のバージョン(L)が命令に渡された絶対ポイントに直線を描画し、小文字のバージョン(l)が命令に渡された相対ポイントに直線を描画することです。相対ポイントは、行の開始前に仮想筆がいたポイントに、与えられたlコマンドの座標を加算したポイントです。
仮想筆が50、50、そしてl100,100コマンドを使用すると、直線は50+100、50+100=150,150。仮想筆の位置に関わらず、L100,100コマンドを使用して、直線を正確に描画できます100,100。

仮想筆を描画します

パス形状は常に最後の仮想筆点から新しいポイントに描画されます。各描画コマンドには終点があります。そのコマンドを実行すると、仮想筆点はその描画コマンドの終点に位置します。次の描画コマンドはそのポイントから始まります。

弧線

<path>要素を使用して円弧を描画するのは、Aとaコマンドを使用して行われます。直線と同様に、大文字の命令(A)は絶対座標を使用してその終点を指定し、小文字の命令(a)は相対座標（起点からの相対位置）を使用します。以下はその例です：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50　　　　　　　　　　　　　A30,50　0　0,1　100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

実行後の結果は以下の通りです：

この例では、ポイント50,50から点へ100,100（Aコマンドで最後に指定）で円弧を描画します。
円弧の半径は、Aコマンドで設定された最初の二つのパラメータで設定されます。最初のパラメータはrx（x方向の半径）であり、二つ目のパラメータはry（y方向の半径）です。rxとryを同じ値に設定すると円弧が生成されます。rxとryを異なる値に設定すると楕円弧が生成されます。上の例では、rxが30、ryを設定します50。
Aコマンドに設定された第3のパラメータはx軸回転(x-axis-rotation)です。通常のx軸と比較して、これは円弧のx軸の回転を設定します。上記の例では、x軸の回転は0に設定されています。ほとんどの場合、このパラメータを変更する必要はありません。

第4と第5のパラメータは大円弧マーク(large-arc-flag)とスキャンマーク(sweep-flag)パラメータです。大円弧マーク(large-arc-flag)が、起点、終点、rxおよびryを満たす较小または较大の円弧を描画するかを決定します。以下は、描画4個の円弧の例、各円弧には大円弧マーク(large-arc-flag)とスキャンマーク(sweep-flag)の組み合わせが異なる場合：

<svg　width="500"　height="120">
　　　　<path　d="M40,20　　　　　A30,30　0　0,0　60,70"　style="stroke:　#cccc00;　stroke-width:2;　fill:none;"></path>
　　　　<path　d="M40,20　　　　　A30,30　0　1,0　60,70"　style="stroke:　#ff0000;　stroke-width:2;　fill:none;"></path>
　　　　<path　d="M40,20　　　　　A30,30　0　1,1　60,70"　style="stroke:　#00ff00;　stroke-width:2;　fill:none;"></path>
　　　　<path　d="M40,20　　　　　A30,30　0　0,1　60,70"　style="stroke:　#0000ff;　stroke-width:2;　fill:none;"></path>
</svg>

実行後の結果は以下の通りです：

から40,20から点へ60,70で4つの異なる円弧を描画します。長円弧、短円弧およびそれぞれの短/大円弧の2つの鏡像バージョンです。大円弧マークは、大円弧か小円弧を描画するかを決定します。スキャンマークは、円弧が起点から終点への軸を通じて鏡像されるかどうかを決定します。実際には、スキャンマークは円弧の描画方向（時計回りまたは反時計回り）を制御し、これにより「鏡像」効果が生まれます。

描画された1つ目の円弧は黄色の円弧です。大円弧フラグを0に設定することは、小さな可能性のある円弧を描画することを意味します。スキャンフラグも0に設定され、これは円弧が鏡像されないことを意味します。以下は黄色の円弧です：

描画された2つ目の円弧は赤色の円弧です。大円弧フラグを設定します1これは、2つの可能性のある円弧の中で大きい円弧を描画することを意味します。範囲は、40,20から60,70です。以下は、違いを説明するために一緒に表示された黄色と赤色の円弧です：

緑色と青色の円弧（前の例のすべての4つの円弧から来ています）は黄色と赤色の円弧と同じですが、スキャンフラグ(sweep-flag)が設定されます1これは、それらが同じ円弧を描画するが、起点から終点への軸上で鏡像されることを意味します。

二次ベセル曲線

二次Bezier曲線を《path》要素で描画することができます。二次Bezier曲線の描画はQとQコマンドで行われます。直線と同様に、大文字コマンド(Q)は絶対座標を終点として使用し、小文字コマンド(q)は相対座標（起点からの相対座標）を使用します。以下は、簡単な二次曲線の例です：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　Q50,100　100,100"　
　　　　　　style="stroke:　#006666;　fill:none;"/></svg>

実行後の結果は以下の通りです：

この例では、二次ベジェ曲線を描画し、50,50から点へ100,100，制御点は50,200。制御点はQコマンドで設定される2つのパラメータの最初のものです。

制御点は磁石のように曲線を引きずります。曲線上のポイントが制御点に近いほど、制御点はより内側に引きずられ、これは制御点に近いことを意味します。以下は制御点を描画した画像の例です：

実際には、起点から制御点までの線、そして制御点から終点までの線を描画すると、第一条の中央から第二条の中央までの線が曲線の接線となります。この点を示す画像があります：

三次ベジェ曲線

Cとcコマンドを使用して三次ベジェ曲線を描画します。三次ベジェ曲線は二次ベジェ曲線に似ていますが、制御点が1つではなく2つあります。ラインと同様に、大文字コマンド（C）は絶対座標を使用して終点を指定し、小文字コマンド（c）は相対座標（起点からの相対）を使用します：

<path　d="M50,50　C75,80　125,20　150,50"
　　　　　　style="stroke:　#006666;　fill:none;"/>

これは制御点を描画した結果の画像です。実行後の結果は以下の通りです。

三次ベジェ曲線を使用して高度な曲線を作成できます：

経路閉じる

この《path》要素は、経路を閉じるためのものです。これは、描画された最後の点から最初の点に戻る線の短縮コマンドを意味します。このコマンドはZ（またはz）です。-大文字と小文字の閉じる経路コマンドの間には違いはありません)：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　L100,50　L100,100　Z"
　　　　style="stroke:　#006666;　fill:none;"/></svg>

実行後の結果は以下の通りです：

コマンド組み合わせ

同一の《path》要素内でpathコマンドを組み合わせることができます。以下はその例です：

<svg　width="500"　height="225">
　　　　<path　d="M100,100　L150,100　a50,25　0　0,0　150,100　q50,-50　70,-170　Z"　style="stroke:　#006666;　fill:　none;"></path>
</svg>

この例では、直線、円弧、二次ベジェ曲線を描画し、最後に起点に戻る直線で経路を閉じます。以下は生成された画像です：

経路塗りつぶし

fill CSS属性を使用して経路を塗りつぶすことができます。以下はその例です：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M100,100　L150,100　L150,150　Z"
　　　　　　style="stroke:　#0000cc;
　　　　　　　　　　　　　stroke-width:　2px;　　　　　　　　　　　　　fill　　:　#ccccff;"/></svg>

実行後の結果は以下の通りです：

形状の内部が浅い青色で塗りつぶされていることに注意してください。

マーク

《path》要素上にマークを使用できます。マークは、経路の起点、中間、終点に位置する小さな記号で、経路の方向を表示するために使用されます。例えば、経路の始点には円形または正方形があり、終点には矢印があります。

シンボルショートカット

同じコマンドを何度も使用する必要がある場合は、コマンドの文字を省略し、追加のパラメータを提供するだけで済みます。これはコマンドがその場所にあるかのように見えます。以下は例です:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

この例では、lコマンドに他のパラメータを渡す方法を説明しています。これも他のパスコマンドに適用されます。以下は生成された画像です：

Pathコマンド完全ガイド

以下はSVG　path要素可能な筆コマンドのリスト。各コマンドは、一文字と一連串の数字（座標など）で構成され、それらはそのコマンドのパラメータです。大文字のコマンドは通常、座標パラメータを絶対座標として解釈します。小文字のコマンドは通常、座標パラメータを現在の筆の位置に対して解釈します。