d

d属性は描かれるパスを定義します。

パスの定義はパスコマンドのリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成されます。コマンドの詳細は以下になります。

３つの要素がこの属性を有します： <path>, <glyph> (en-US), <missing-glyph> (en-US)

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

<path>要素に対しては、d属性は、描かれるパスを定義するパスコマンドの並びを含む文字列です。

警告:SVG2において、<glyph> (en-US)は非推奨であり、用いるべきではありません。

<glyph> (en-US)要素に対しては、d属性はグリフのアウトライン形状を定義するパスコマンドの並びを含む文字列です。

注意:原点(座標0,0)は通常、コンテキストの左上の角です。しかし、<glyph> (en-US)要素は、それ自身の原点を文字ボックスの左下に持ちます。

警告:SVG2において、<missing-glyph> (en-US)は非推奨であり、用いるべきではありません。

<missing-glyph> (en-US)要素に対しては、d属性は、グリフのアウトライン形状を定義するパスコマンドの並びを含んだ文字列です。

パスコマンドは、描かれるパスの定義を指定します。各コマンドは、コマンド文字とコマンドパラメータを示す数値で構成されます。

SVGでは、6つのタイプのパスコマンドを定義しており、全部で20個のコマンドがあります:

• MoveTo: M, m
• LineTo: L, l, H, h, V, v
• 3次ベジエ曲線: C, c, S, s
• 2次ベジエ曲線: Q, q, T, t
• 楕円円弧曲線: A, a
• ClosePath: Z, z

ノート:コマンドはケースセンシティブ（大小文字の区別あり）です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。

コマンドへの引数として負値を指定することは常に可能です:

• 負の角度は反時計回りとなります;
• 絶対値での負のxとyの値は反転座標と解釈されます;
• 相対値での負のxの値は左へ移動,相対値での負のyの値は上方向へ移動します。

MoveToでの指定は、筆記用具を持ち上げ他の位置で下ろす動作と考えられます―言い換えると、現在位置 (P_o; {x_o, y_o})の移動です。P_o と新しい現在位置 (P_n; {x_n, y_n})との間には線は描かれません。

例

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red"
    d="M 10,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 40,20 h 10
       m  0,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 50,50 h 10
       m-20,10 h 10
       m-20,10 h 10
       m-20,10 h 10" />
</svg>

LineToは、現在位置 (P_o; {x_o, y_o})から終端位置 (P_n; {x_n, y_n})への直線を指定されたパラメータに基づいて描きます。終端位置(P_n)は、次のコマンドでの現在位置 (P_o′)となります。

例

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 絶対座標でのLineToコマンド -->
  <path fill="none" stroke="red"
        d="M 10,10
           L 90,90
           V 10
           H 50" />

  <!-- 相対座標でのLineToコマンド -->
  <path fill="none" stroke="red"
        d="M 110,10
           l 80,80
           v -80
           h -40" />
</svg>

3次ベジエ曲線は4点で定義される滑らかな曲線です:

開始位置 (現在位置)

(P_o = {x_o, y_o})

終端位置

(P_n = {x_n, y_n})

開始制御点

(P_cs = {x_cs, y_cs})
(曲線の開始点近くの曲率を制御します)

終端制御点

(P_ce = {x_ce, y_ce})
(曲線の終端近くの曲率を制御します)

描画後に、終端位置(P_n)は、次のコマンドに対する現在位置 (P_o′)となります。

例

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- 絶対座標での3次ベジエ曲線 -->
  <path fill="none" stroke="red"
        d="M 10,90
           C 30,90 25,10 50,10
           S 70,90 90,90" />

  <!-- 相対座標での3次ベジエ曲線 -->
  <path fill="none" stroke="red"
        d="M 110,90
           c 20,0 15,-80 40,-80
           s 20,80 40,80" />

  <!-- 曲線の頂点と制御点の明示 -->
  <g id="ControlPoints">

    <!-- 1つ目の3次コマンドへの制御点 -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5"/>

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5"/>

    <!-- 2つめの円滑化制御点 (1つ目は暗黙的) -->
    <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- 曲線上の頂点 -->
    <circle cx="10" cy="90" r="1.5"/>
    <circle cx="50" cy="10" r="1.5"/>
    <circle cx="90" cy="90" r="1.5"/>
  </g>
  <use xlink:href="#ControlPoints" x="100" />
</svg>

2次ベジエ曲線は3点で定義される滑らかな曲線です:

開始座標(現在位置)

P_o = {x_o, y_o}

終端座標

P_n = {x_n, y_n}

制御点

P_c = {x_c, y_c}
(曲率を制御します)

描画後に、終端位置(P_n)は、次のコマンドに対する現在位置(P_o′)となります。

例

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- 暗黙的な繰り返しによる2次ベジエ曲線 -->
  <path fill="none" stroke="red"
        d="M 10,50
           Q 25,25 40,50
           t 30,0 30,0 30,0 30,0 30,0" />

  <!-- 曲線の頂点と制御点の明示 -->
  <g>
    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- 曲線上の頂点 -->
    <circle cx="10" cy="50" r="1.5"/>
    <circle cx="40" cy="50" r="1.5"/>

    <g id="SmoothQuadraticDown">
      <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use xlink:href="#SmoothQuadraticDown" x="60" />
    <use xlink:href="#SmoothQuadraticUp"   x="60" />
    <use xlink:href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>

楕円円弧曲線は楕円の一部として定義される曲線です。ベジエ曲線よりも楕円円弧曲線を用いるほうが、高度な正則曲線の描画が容易になることが多くあります。

例

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

  <!-- 円弧への２つのフラグの効果により各円弧が描画される -->
  <path fill="none" stroke="red"
        d="M 6,10
           A 6 4 10 1 0 14,10" />

  <path fill="none" stroke="lime"
        d="M 6,10
           A 6 4 10 1 1 14,10" />

  <path fill="none" stroke="purple"
        d="M 6,10
           A 6 4 10 0 1 14,10" />

  <path fill="none" stroke="pink"
        d="M 6,10
           A 6 4 10 0 0 14,10" />
</svg>

ClosePathは、現在位置からパスの開始位置までの直線描画を指定します。

ノート:ClosePathによって生じる形状は、他のコマンドを用いて初期位置へ線を描いて閉じた場合とは異なる場合があります。これは、描線の終端が互いに接続されるためです (stroke-linejoin 設定)を参照のこと。 単に同じ座標に配置されるわけではありません。

例

<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">

  <!--
  初期位置と異なる終端位置による
  パスで描かれる開いた形状
  -->
  <path stroke="red"
        d="M 5,1
           l -4,8 8,0" />

  <!--
  初期位置と一致する終端位置による
  パスで描かれる開いた形状
  -->
  <path stroke="red"
        d="M 15,1
           l -4,8 8,0 -4,-8" />

  <!--
  初期位置と異なる終端位置による
  パスで描かれる閉じた形状
  -->
  <path stroke="red"
        d="M 25,1
           l -4,8 8,0
           z" />
</svg>