SVG (スケーラブル ベクター グラフィックス) では、 <path>要素は複雑な形状やパスを作成するための強力で多用途な方法です。 <path>要素はd属性を使用してパス データを定義します。パス データは、パスの形状を記述する一連のコマンドとパラメータで構成されます。 SVG で<path>要素を使用する一般的な方法をいくつか示します。

1. 直線 ( Lまたはl ):

   • Mコマンドを使用して開始点に移動します。
   • Lコマンドを使用して、指定した点まで直線を描きます。

    XML
    <path d="M10 10 L50 50" stroke="black" fill="transparent" />
   

2. カーブ ( Cまたはc ):

   • Cコマンドを使用して、3 次ベジェ曲線を描画します。

    XML
    <path d="M10 80 C40 10, 65 10, 95 80 S150 150, 180 80" stroke="black" fill="transparent" />
   

3. 二次ベジェ曲線 ( Qまたはq ):

   • Qコマンドを使用して、二次ベジェ曲線を描画します。

    XML
    <path d="M10 80 Q95 10 180 80" stroke="black" fill="transparent" />
   

4. 円弧 ( Aまたはa ):

   • Aコマンドを使用して、楕円弧を描きます。

    XML
    <path d="M10 80 A50 50 0 0 0 110 80" stroke="black" fill="transparent" />
   

5. パスを閉じる ( Zまたはz ):

   • Zコマンドを使用してパスを閉じ、最後の点を最初の点に接続します。

    XML
    <path d="M10 10 L50 50 L90 10 Z" stroke="black" fill="transparent" />
   

6. 複数のサブパス:

   • Mコマンドで区切ることにより、単一の<path>要素に複数のサブパスを含めることができます。

    XML
    <path d="M10 10 L50 50 M60 60 L100 100" stroke="black" fill="transparent" />
   

7. 相対座標:

   • 相対座標を指定するには、小文字 ( l 、 c 、 q 、 a ) を使用します。

    XML
    <path d="M10 10 l20 20" stroke="black" fill="transparent" />
   

これらは、SVG の<path>要素を使用してさまざまな形状やパスを作成する方法のほんの一例です。これらのコマンドとパラメータを試してみると、さまざまなグラフィックを作成するのに役立ちます。