d
d
属性は描かれるパスを定義します。
パスの定義はパスコマンドのリストで、各コマンドはコマンド文字とコマンドへの引数を示す数値から構成されます。コマンドの詳細は以下になります。
この属性を使用できるのは、SVG 要素のうち <path>
, <glyph>
, <missing-glyph>
です。
d
はプレゼンテーション属性のため、CSS プロパティとして使用することもできます。
例
<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
glyph
missing-glyph
警告: SVG2 において、<missing-glyph>
は非推奨であり、用いるべきではありません。
<missing-glyph>
要素に対しては、d
属性は、グリフのアウトライン形状を定義するパスコマンドの並びを含んだ文字列です。
値 | <string> |
---|---|
既定値 | none |
アニメーション | 可 |
CSS プロパティとして d を使用
d
はプレゼンテーション属性であるため、CSS を使用して変更することもできます。
このプロパティは、path() または none
のいずれかをとります。
以下の例は、要素の上にマウスを置くと新しいパスを適用する方法を示しています。 新しいパスは古いパスと同じですが、ハートを横切る線が追加されます。
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"
);
}
<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 )+ |
現在位置 を座標
式: Pn = { |
m | (dx , dy )+ |
現在位置 を、最後に把握されたパス位置から X 軸方向に
式: Pn = {xo
+ |
例
<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 )+ |
現在位置 から
式: Po′ =
Pn = { |
l | (dx , dy )+ |
現在位置 から、現在位置 を X 軸方向に
式: Po′ =
Pn = {xo +
|
H | x + |
現在位置から、引数
式: Po′ =
Pn = { |
h | dx + |
現在位置から、X 軸方向へ 現在位置から
式: Po′ =
Pn = {xo +
|
V | y + |
現在位置から、引数
式: Po′ =
Pn = {xo, |
v | dy + |
現在位置から、現在位置からの Y 軸方向へ
式: Po′ =
Pn = {xo, yo + |
例
<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 )+ |
開始点から
|
c | (dx1 ,dy1 , dx2 ,dy2 , dx ,dy )+ |
開始点から、開始点からの X 軸方向に
|
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 ) コマンドと解釈されます。 |
例
<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 点で定義される滑らかな曲線です。
描画後に、終了点 (Pn) ガ次のコマンドに対する現在位置 (Po′)となります。
コマンド | 引数 | 説明 |
---|---|---|
Q | (x1 ,y1 , x ,y )+ |
開始点から
|
q | (dx1 ,dy1 , dx ,dy )+ |
開始点から、開始点からのX 軸方向に
|
T | (x ,y )+ |
開始点から
|
t | (dx ,dy )+ |
現在位置から、現在位置から X 軸方向へ
|
例
<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 は、次のコマンドに対する新しい現在位置となります。すべての後続する引数の組は、暗黙的に絶対座標での円弧曲線 (A ) コマンドに対するものと解釈されます。
|
a |
(rx ry
angle large-arc-flag
sweep-flag dx
dy )+
|
現在位置から、現在位置から X 軸方向へ
dx と dy だけずらした座標にします。それ以降のすべての引数の組は、暗黙的に相対座標での円弧曲線 (a ) コマンドに対するものと解釈されます。
|
例
<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
設定)を参照のこと。 単に同じ座標に配置されるわけではありません。
例
<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.