d
=

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

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

３つの要素がこの属性を有します： `<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* |
| アニメーション | Yes |

glyph
-----

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

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

|  |  |
| --- | --- |
| 値 | **<string>** |
| 既定値 | *none* |
| アニメーション | Yes |

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

missing-glyph
-------------

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

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

|  |  |
| --- | --- |
| 値 | **<string>** |
| 既定値 | *none* |
| アニメーション | Yes |

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

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

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


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

/\* This path is displayed on hover\*/
#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* での指定は、筆記用具を持ち上げ他の位置で下ろす動作と考えられます―言い換えると、*現在位置* (*Po*; {*xo*, *yo*}) の移動です。*Po* と新しい *現在位置* (*Pn*; {*xn*, *yn*}) との間には線は描かれません。

| コマンド | パラメータ | 説明 |
| --- | --- | --- |
| M | (`x`, `y`)+ | 
*現在位置* を座標
 `x`,`y` へ移動します。後続する任意個の座標の組は暗黙的に絶対座標での LineTo(`L`)コマンドと解釈されます(*以下を参照*)。

**形式:** Pn = {`x`, `y`} |
| m | (`dx`, `dy`)+ | *現在位置* を最後に把握されたパス位置からの `dx` を x 軸方向、`dy` を y 軸に沿った並進として移動します。後続する任意個の座標の組は暗黙的に相対座標での LineTo(`l`)コマンドとして解釈されます(*以下を参照*)。

**形式:** Pn = {xo
 + `dx`, yo + `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* は、*現在位置* (*Po*; {*xo*, *yo*}) から *終端位置* (*Pn*; {*xn*, *yn*}) への直線を指定されたパラメータに基づいて描きます。*終端位置* (*Pn*) は、次のコマンドでの *現在位置* (*Po′*) となります。

| コマンド | パラメータ | 説明 |
| --- | --- | --- |
| L | (`x`, `y`)+ | *現在位置* から `x`,`y` で指定される *終端位置* へ直線を描きます。後続する任意個の座標の組は暗黙的に絶対座標での LineTo (`L`) コマンドと解釈されます。

**形式:** Po′ =
 Pn = {`x`, `y`}
  |
| l | (`dx`, `dy`)+ | *現在位置* から、*現在位置* に対する x-軸方向に`dx` 、y-軸方向に `dy` で表される *終端位置* への直線を描きます。後続する任意個の座標の組は、暗黙的に相対座標での LineTo (`l`) コマンドと解釈されます(*以下を参照*)。

**形式:** Po′ =
 Pn = {xo +
 `dx`, yo + `dy`}
  |
| H | `x`+ | *現在位置*から、パラメータ`x`と*現在位置*の`y`座標で指定される*終端座標*までの水平線を描きます。後続する任意個の値は、暗黙的に絶対座標での水平線用の LineTo (`H`)コマンドと解釈されます。

**形式:** Po′ =
 Pn = {`x`, yo}
  |
| h | `dx`+ | *現在位置*から、*現在位置*からの x-軸方向への`dx`の並進と*現在位置*の `y` 座標で指定される*終端位置*までの水平線を描きます。後続する任意個の値は、暗黙的に相対座標での水平線用の LineTo (`h`) コマンドと解釈されます。

**形式:** Po′ =
 Pn = {xo +
 `dx`, yo}
  |
| V | `y`+ | *現在位置*から、パラメータ `y` と*現在位置*の `x` 座標で指定される*終端座標*までの垂直線を描きます。後続する任意個の値は、暗黙的に絶対座標での垂直線用の LineTo (`V`)コマンドと解釈されます。

**形式:** Po′ =
 Pn = {xo, `y`}
  |
| v | `dy`+ | *現在位置*から、*現在位置*からの y-軸方向への `dy` の並進と*現在位置*の `x` 座標で指定される*終端位置*までの垂直線を描きます。後続する任意個の値は、暗黙的に相対座標での垂直線用の LineTo (`v`)コマンドと解釈されます。

**形式:** Po′ =
 Pn = {xo, yo + `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 点で定義される滑らかな曲線です:

*開始位置 (現在位置)*

(Po = {xo, yo})

*終端位置*

(Pn = {xn, yn})

*開始制御点*

 (Pcs = {xcs, ycs})
 (曲線の開始点近くの曲率を制御します)


*終端制御点*

 (Pce = {xce, yce})
 (曲線の終端近くの曲率を制御します)


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

| コマンド | パラメータ | 説明 |
| --- | --- | --- |
| C | (`x1`,`y1`, `x2`,`y2`, `x`,`y`)+ | *開始位置*から、`x`,`y`で指定される*終端位置*までの3次ベジエ曲線を描きます。*開始制御点*は`x1`,`y1`で指定され、*終端制御点*は`x2`,`y2`で指定されます。後続する任意個の3つ組の座標は、暗黙的な絶対座標での3次ベジエ曲線(`C`)コマンドへのパラメータと解釈されます。

形式:
Po′ = Pn = {`x`, `y`} ;Pcs = {`x1`, `y1`} ;Pce = {`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`) コマンドと解釈されます。


形式:

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pcs = {xo +
 `dx1`, yo + `dy1`} ;Pce = {xo +
 `dx2`, yo + `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 点で定義される滑らかな曲線です:

*開始座標(現在位置)*

*Po* = {*xo*, *yo*}

*終端座標*

*Pn* = {*xn*, *yn*}

*制御点*

*Pc* = {*xc*, *yc*}
 (曲率を制御します)


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

| コマンド | パラメータ | 説明 |
| --- | --- | --- |
| Q | (`x1`,`y1`, `x`,`y`)+ | 
*開始位置*から`x`,`y`で指定される*終端位置*までの2次ベジエ曲線を描きます。*制御点*は`x1`,`y1`で指定されます。後続する任意個の座標の組は、暗黙的に絶対座標での4次ベジエ曲線
 (`Q`) コマンドへのパラメータと解釈されます。


**形式:**
Po′ = Pn = {`x`, `y`} ;Pc = {`x1`, `y1`}
 |
| q | (`dx1`,`dy1`, `dx`,`dy`)+ | 
*開始位置*から、*開始位置*からのx-軸方向に`dx`,y-軸方向に`dy`とした並進となる*終端位置*までの2次ベジエ曲線を描きます。*制御点*は、*開始点*
 (曲線の開始位置)をx-軸方向に`dx1`,y-軸方向に`dy1`と並進した点です。後続する任意個の座標は、暗黙的に相対座標での2次ベジエ曲線
 (`q`) コマンドへのパラメータと解釈されます。


形式:

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pc = {xo +
 `dx1`, yo + `dy1`}

 |
| T | (`x`,`y`)+ | *開始位置*から`x`,`y`で指定される*終端位置*までの滑らかな2次ベジエ曲線を描きます。*制御点*は、直前の曲線コマンドの*終端制御点*が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、*制御点*は曲線の開始位置(*現在座標*)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな2次ベジエ曲線(`T`)コマンドへのパラメータと解釈されます。

形式:
Po′ = Pn = {`x`, `y`}
 |
| t | (`dx`,`dy`)+ | 
*開始位置*から、*現在位置*からのx-軸方向への`dx`,y-軸方向への`dy`への並進で表される*終端位置*までの滑らかな3次ベジエ曲線を描きます。*制御点*は、直前の曲線コマンドの*制御点*が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、*制御点*は曲線の開始位置(*現在座標*)と同一となります。後続する任意個の座標の組は、暗黙的に相対座標での滑らかな2次ベジエ曲線
 (`t`) コマンドへのパラメータと解釈されます。


形式:

Po′ = Pn = {xo
 + `dx`, yo + `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="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 href="#SmoothQuadraticDown" x="60" />
    <use href="#SmoothQuadraticUp" x="60" />
    <use href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>
```

### 楕円円弧曲線

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

| コマンド | パラメータ | 説明 |
| --- | --- | --- |
| A | 
 (`rx` `ry`
`角度` `大円弧フラグ<`
`掃引フラグ` `x`
`y`)+
  | 現在位置から`x`,`y`座標へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:* `rx`と`ry`は楕円の半径です;
* `角度`はx-軸に対する楕円の角度（度単位）です;
* `大円弧フラグ`と`掃引フラグ`は、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。
    + `大円弧フラグ`では大きい円弧 (**1**)
     を描くか、小さい円弧 (**0**) を描くかを選択し,
    + `掃引フラグ`では時計回りの円弧 (**1**)
     を描くか、反時計周りの円弧 (**0**)
     を描くかを選択します。

座標 `x`,`y`
 は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に絶対座標での円弧曲線
 (`A`) コマンドに対するものと解釈されます。
  |
| a | 
 (`rx` `ry`
`(`rx` `ry` `角度```大円弧フラグ`
`掃引フラグ` `dx`
`dy`)+
  | 現在位置から、現在位置からのx-軸方向への`dx`とy-軸方向への`dy`への並進で指定される点へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:* `rx`と`ry`は楕円の半径です;
* `角度`はx-軸に対する楕円の角度（度単位）です;
* `大円弧フラグ`と`掃引フラグ`は、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。
    + `大円弧フラグ`では大きい円弧 (**1**)
     を描くか、小さい円弧 (**0**) を描くかを選択し,
    + `掃引フラグ`では時計回りの円弧 (**1**)
     を描くか、反時計周りの円弧 (**0**)
     を描くかを選択します。

`dx`と`dy`で並進された座標`X`,`Y`は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に相対座標での円弧曲線
 (`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 with JavaScript enabled. Enable JavaScript to view data.