d
d
属性は描かれるパスを定義します。
パスの定義はパスコマンドのリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成されます。コマンドの詳細は以下になります。
3つの要素がこの属性を有します: <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
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 |
パスコマンド
パスコマンドは、描かれるパスの定義を指定します。各コマンドは、コマンド文字とコマンドパラメータを示す数値で構成されます。
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 )+ |
現在位置を最後に把握されたパス位置からの 形式: 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 xlink:href="#ControlPoints" x="100" />
</svg>
2次ベジエ曲線
2次ベジエ曲線は3点で定義される滑らかな曲線です:
- 開始座標(現在位置)
- Po = {xo, yo}
- 終端座標
- Pn = {xn, yn}
- 制御点
- Pc = {xc, yc}
(曲率を制御します)
描画後に、終端位置(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="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>
楕円円弧曲線
楕円円弧曲線は楕円の一部として定義される曲線です。ベジエ曲線よりも楕円円弧曲線を用いるほうが、高度な正則曲線の描画が容易になることが多くあります。
コマンド | パラメータ | 説明 |
---|---|---|
A | (rx ry 角度 大円弧フラグ 掃引フラグ x y )+ |
現在位置から
x ,y は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に絶対座標での円弧曲線 (A ) コマンドに対するものと解釈されます。 |
a | (rx ry 角度 大円弧フラグflag 掃引フラグ dx dy )+ |
現在位置から、現在位置からのx-軸方向への
dx とdy で並進された座標X ,Y は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に相対座標での円弧曲線 (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>
仕様
仕様 | 状態 | コメント |
---|---|---|
Scalable Vector Graphics (SVG) 2 d の定義 |
勧告候補 | <path> の定義 |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) d の定義 |
勧告 | <glyph> と<missing-glyph> の初期定義 |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) d の定義 |
勧告 | <path> の初期定義 |