d

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

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

3つの要素がこの属性を有します: <path>, <glyph>, <missing-glyph>

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

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

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

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

  • 負の角度は反時計回りとなります;
  • 絶対値 での負の xy の値は反転座標と解釈されます;
  • 相対値 での負の 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
<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
<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
<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
<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座標へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:

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

現在位置から、現在位置からのx-軸方向へのdxとy-軸方向へのdyへの並進で指定される点へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:

  • rxryは楕円の半径です;
  • 角度はx-軸に対する楕円の角度(度単位)です;
  • 大円弧フラグ掃引フラグは、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。
    • 大円弧フラグでは大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し,
    • 掃引フラグでは時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。
dxdyで並進された座標X,Yは、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に相対座標での円弧曲線 (a) コマンドに対するものと解釈されます。

html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- 円弧への2つのフラグの効果により各円弧が描画される -->
  <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
<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