d

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

この属性を使用できるのは、SVG 要素のうち <path>, <glyph>, <missing-glyph> です。

d はプレゼンテーション属性のため、CSS プロパティとして使用することもできます。

例

html,
body,
svg {
  height: 100%;
}

html

<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

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

値	<string>
既定値	none
アニメーション	可

glyph

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

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

値	<string>
既定値	none
アニメーション	可

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

missing-glyph

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

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

値	<string>
既定値	none
アニメーション	可

CSS プロパティとして d を使用

d はプレゼンテーション属性であるため、CSS を使用して変更することもできます。このプロパティは、path() または none のいずれかをとります。

以下の例は、要素の上にマウスを置くと新しいパスを適用する方法を示しています。新しいパスは古いパスと同じですが、ハートを横切る線が追加されます。

css

html,
body,
svg {
  height: 100%;
}

/* このパスはホバー時に表示されます*/
#svg_css_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}

html

<svg id="svg_css_ex1" 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>

パスコマンド

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

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 パスコマンド

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

コマンド引数説明

コマンド	引数	説明
M	(`x`, `y`)+	現在位置を座標 `x`,`y` へ移動します。後続する任意数の座標の組は暗黙的に絶対座標での LineTo(`L`) コマンドと解釈されます(以下を参照)。式: `P_n` = {`x`, `y`}
m	(`dx`, `dy`)+	現在位置を、最後に把握されたパス位置から X 軸方向に `dx`、Y 軸方向に `dy` だけずらします。後続する任意数の座標の組は暗黙的に相対座標での LineTo(`l`) コマンドとして解釈されます(以下を参照)。式: `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

(x, y)+

現在位置 を座標 x,y へ移動します。後続する任意数の座標の組は暗黙的に絶対座標での LineTo(L) コマンドと解釈されます(以下を参照)。

式: P_n = {x, y}

(dx, dy)+

現在位置 を、最後に把握されたパス位置から X 軸方向に dx、Y 軸方向に dy だけずらします。後続する任意数の座標の組は暗黙的に相対座標での LineTo(l) コマンドとして解釈されます(以下を参照)。

式: P_n = {x_o + dx, y_o + dy}

例

html,
body,
svg {
  height: 100%;
}

html

<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 パスコマンド

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

コマンド	引数	説明
L	(`x`, `y`)+	現在位置から `x`,`y` で指定される終了点へ直線を描きます。後続する任意の数の座標の組は、暗黙的に絶対座標での LineTo (`L`) コマンドと解釈されます。式: `P_o′` = `P_n` = {`x`, `y`}
l	(`dx`, `dy`)+	現在位置から、現在位置を X 軸方向に `dx`、Y 軸方向に `dy` だけ移動した終了点への直線を描きます。後続する任意数の座標の組は、暗黙的に相対座標での LineTo (`l`) コマンドと解釈されます（以下を参照）。式: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}
H	`x`+	現在位置から、引数 `x` と現在位置の `y` 座標で指定される終了点までの水平線を描きます。後続する任意数の値は、暗黙的に絶対座標での水平線用の LineTo (`H`) コマンドと解釈されます。式: `P_o′` = `P_n` = {`x`, `y_o`}
h	`dx`+	現在位置から、X 軸方向へ現在位置から `dx` だけ移動し、現在位置の `y` 座標の位置まで移動した終了点までの水平線を描きます。後続する任意数の値は、暗黙的に相対座標での水平線用の LineTo (`h`) コマンドと解釈されます。式: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o`}
V	`y`+	現在位置から、引数 `y` と現在位置の `x` 座標で指定される終了点までの垂直線を描きます。後続する任意数の値は、暗黙的に絶対座標での垂直線用の LineTo (`V`) コマンドと解釈されます。式: `P_o′` = `P_n` = {`x_o`, `y`}
v	`dy`+	現在位置から、現在位置からの Y 軸方向へ `dy` だけ移動し、現在位置の `x` 座標で指定される終了点までの垂直線を描きます。後続する任意数の値は、暗黙的に相対座標での垂直線用の LineTo (`v`) コマンドと解釈されます。式: `P_o′` = `P_n` = {`x_o`, `y_o` + `dy`}

例

html,
body,
svg {
  height: 100%;
}

html

<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 次ベジェ曲線

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′) となります。

コマンド	引数	説明
C	(`x1`,`y1`, `x2`,`y2`, `x`,`y`)+	開始点から `x`,`y` で指定した終了点までの 3 次ベジェ曲線を描画します。開始制御点は `x1`,`y1` で指定し、終端制御点は `x2`,`y2` で指定します。それに続く座標対の 3 つ組は、暗黙的な絶対 3 次ベジェ曲線 (`C`) コマンドの引数として解釈されます。式: `P_o′` = `P_n` = {`x`, `y`} ; `P_cs` = {`x1`, `y1`} ; `P_ce` = {`x2`, `y2`}
c	(`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+	開始点から、開始点からの X 軸方向に `dx`, Y 軸方向に `dy` だけ移動した終了点までの 3 次ベジェ曲線を描きます。開始制御点は、開始点（曲線の開始点）を X 軸方向に `dx1`, Y 軸方向に `dy1` だけ移動した点です。終端制御点は現在位置（曲線の開始点）を、X 軸方向に `dx2`, Y 軸方向に `dy2` だけ移動した点です。後続する任意数の 3 つ組の座標は、暗黙的に相対座標での 3 次ベジェ曲線 (`c`) コマンドと解釈されます。式: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`} ; `P_cs` = {`x_o` + `dx1`, `y_o` + `dy1`} ; `P_ce` = {`x_o` + `dx2`, `y_o` + `dy2`}
S	(`x2`,`y2`, `x`,`y`)+	開始点から、`x`,`y` で指定される終了点までの滑らかな 3 次ベジェ曲線を描きます。終端制御点は、`x2`,`y2` で指定されます。開始制御点は、直前の曲線コマンドの終端制御点が鏡映されます。もし直前のコマンドが 3 次ベジェ曲線でない場合は、開始制御点は曲線の開始点(現在座標)と同一となります。後続する任意数の座標の組は、暗黙的に絶対座標での滑らかな 3 次ベジェ曲線 (`S`) コマンドへの引数と解釈されます。
s	(`dx2`,`dy2`, `dx`,`dy`)+	開始点から、現在位置からのX 軸方向への `dx`, Y 軸方向への `dy` だけ移動した終了点までの滑らかな 3 次ベジェ曲線を描きます。終端制御点は、現在位置(曲線の開始点)をX 軸方向への `dx2` と Y 軸方向への `dy2` だけ移動した点です。開始制御点は、直前の曲線コマンドの終了点が鏡映されます。もし直前のコマンドが 3 次ベジェ曲線でない場合は、開始制御点は曲線の開始点（現在座標）と同一となります。後続する任意数の座標の組は、暗黙的に相対座標での滑らかな 3 次ベジェ曲線 (`s`) コマンドと解釈されます。

例

html,
body,
svg {
  height: 100%;
}

html

<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 href="#ControlPoints" x="100" />
</svg>

2 次ベジェ曲線

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

開始点（現在位置）: P_o = {x_o, y_o}
終了点: P_n = {x_n, y_n}
制御点: P_c = {x_c, y_c} (曲率を制御します)

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

コマンド	引数	説明
Q	(`x1`,`y1`, `x`,`y`)+	開始点から `x`,`y` で指定される終了点までの 2 次ベジェ曲線を描きます。制御点は`x1`,`y1`で指定されます。後続する任意数の座標の組は、暗黙的に絶対座標での 2 次ベジェ曲線 (`Q`) コマンドへの引数と解釈されます。式: `P_o′` = `P_n` = {`x`, `y`} ; `P_c` = {`x1`, `y1`}
q	(`dx1`,`dy1`, `dx`,`dy`)+	開始点から、開始点からのX 軸方向に `dx`, Y 軸方向に `dy` だけ移動した終了点までの 2 次ベジェ曲線を描きます。制御点は、開始点（曲線の開始点）から X 軸方向に `dx1`, Y 軸方向に `dy1` だけ移動した点です。後続する任意数の座標は、暗黙的に相対座標での 2 次ベジェ曲線 (`q`) コマンドへの引数と解釈されます。式: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`} ; `P_c` = {`x_o` + `dx1`, `y_o` + `dy1`}
T	(`x`,`y`)+	開始点から `x`,`y` で指定される終了点までの滑らかな 2 次ベジェ曲線を描きます。制御点は、直前の曲線コマンドの制御点が反映されます。もし直前のコマンドが 2 次ベジェ曲線でない場合は、制御点は曲線の開始点（現在座標）と同一となります。後続する任意数の座標の組は、暗黙的に絶対座標での滑らかな 2 次ベジェ曲線 (`T`) コマンドへの引数と解釈されます。式: `P_o′` = `P_n` = {`x`, `y`}
t	(`dx`,`dy`)+	現在位置から、現在位置から X 軸方向へ `dx`, Y 軸方向への`dy` だけ移動した終了点までの滑らかな 2 次ベジェ曲線を描きます。制御点は、直前の曲線コマンドの制御点が反映されます。もし直前のコマンドが 2 次ベジェ曲線でない場合は、制御点は曲線の開始点 (現在座標)と同一となります。後続する任意数の座標の組は、暗黙的に相対座標での滑らかな 2 次ベジェ曲線 (`t`) コマンドへの引数と解釈されます。式: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

例

html,
body,
svg {
  height: 100%;
}

html

<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="rgb(0 0 0 / 20%)"
      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="rgb(0 0 0 / 20%)"
        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="rgb(0 0 0 / 20%)"
        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 href="#SmoothQuadraticDown" x="60" />
    <use href="#SmoothQuadraticUp" x="60" />
    <use href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>

楕円円弧曲線

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

コマンド引数説明

コマンド	引数	説明
A	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `x` `y`)+	現在位置から `x`,`y` 座標へ円弧を描きます。楕円の中心はコマンドへの他の引数に基づいて自動的に決定されます。 `rx` と `ry` は楕円の半径です。 `angle` は X 軸に対する楕円の角度（度単位）です。 `large-arc-flag` と `sweep-flag` は、他の引数によって描画可能な 4 つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 `large-arc-flag` では大きい円弧 (`1`) を描くか、小さい円弧 (`0`) を描くかを選択し, `sweep-flag` では時計回りの円弧 (`1`) を描くか、反時計周りの円弧 (`0`) を描くかを選択します。座標 `x`,`y` は、次のコマンドに対する新しい現在位置となります。すべての後続する引数の組は、暗黙的に絶対座標での円弧曲線 (`A`) コマンドに対するものと解釈されます。
a	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `dx` `dy`)+	現在位置から、現在位置から X 軸方向へ `dx`、Y 軸方向への `dy` だけ移動した点へ円弧を描きます。楕円の中心はコマンドへの他の引数に基づいて自動的に決定されます。 `rx`と`ry`は楕円の半径です `angle` は X 軸に対する楕円の角度（度単位）です `large-arc-flag` と `sweep-flag` は、他の引数によって描画可能な 4 つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 `large-arc-flag` では大きい円弧 (`1`) を描くか、小さい円弧 (`0`) を描くかを選択し, `sweep-flag`では時計回りの円弧 (`1`) を描くか、反時計周りの円弧 (`0`) を描くかを選択します。次のコマンドの現在位置を、X および Y 座標で表される位置を `dx` と `dy` だけずらした座標にします。それ以降のすべての引数の組は、暗黙的に相対座標での円弧曲線 (`a`) コマンドに対するものと解釈されます。

(rx ry angle large-arc-flag sweep-flag x y)+

現在位置から x,y 座標へ円弧を描きます。楕円の中心はコマンドへの他の引数に基づいて自動的に決定されます。

rx と ry は楕円の半径です。
angle は X 軸に対する楕円の角度（度単位）です。
large-arc-flag と sweep-flag は、他の引数によって描画可能な 4 つの可能な円弧のうち、どの円弧を描くかを選択可能にします。
- large-arc-flag では大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し,
- sweep-flag では時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。

座標 x,y は、次のコマンドに対する新しい現在位置となります。すべての後続する引数の組は、暗黙的に絶対座標での円弧曲線 (A) コマンドに対するものと解釈されます。

(rx ry angle large-arc-flag sweep-flag dx dy)+

現在位置から、現在位置から X 軸方向へ dx、Y 軸方向への dy だけ移動した点へ円弧を描きます。楕円の中心はコマンドへの他の引数に基づいて自動的に決定されます。

rxとryは楕円の半径です
angle は X 軸に対する楕円の角度（度単位）です
large-arc-flag と sweep-flag は、他の引数によって描画可能な 4 つの可能な円弧のうち、どの円弧を描くかを選択可能にします。
- large-arc-flag では大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し,
- sweep-flagでは時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。

次のコマンドの現在位置を、X および Y 座標で表される位置を dx と dy だけずらした座標にします。それ以降のすべての引数の組は、暗黙的に相対座標での円弧曲線 (a) コマンドに対するものと解釈されます。

例

html,
body,
svg {
  height: 100%;
}

html

<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 は、現在位置 からパスの開始点までの直線描画を指定します。

コマンド	引数	説明
Z, z		パスの最終位置とその初期位置とを接続することで、現在のサブパスを閉じます。もし、2 つの点が異なる座標の場合は、2 点間に直線が描かれます。

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

例

html,
body,
svg {
  height: 100%;
}

html

<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>

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # DProperty
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute

ブラウザーの互換性

BCD tables only load in the browser