d
d
属性は描かれるパスを定義します。
パスの定義はパスコマンドのリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成されます。コマンドの詳細は以下になります。
3つの要素がこの属性を有します: <path>
, <glyph>
(en-US), <missing-glyph>
(en-US)
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
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 )+ |
現在位置を座標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-軸方向へのdx の並進と現在位置の_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 )+
|
開始位置から、
|
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 ) コマンドと解釈されます。
|
例
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 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-軸方向への
|
例
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 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 ) コマンドに対するものと解釈されます。
|
例
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 |