まくろぐ
更新: / 作成:

svg 要素内に配置できる描画要素のまとめです。 座標値のデフォルトの単位はピクセル (px) ですが、svg 要素に viewBox が設定されている場合は viewBox 内の座標系で座標値を指定します。

text 要素（テキスト）

text 要素の例
<text x="20" y="55" font-size="20" fill="red">
  表示するテキスト
</text>
表示するテキスト
属性説明設定例
xテキストアンカーポイントの X 座標100, 50%
yテキストアンカーポイントの Y 座標100, 50%
text-anchor水平方向のアンカーポイント* start … テキスト先頭（ltr 言語なら左端）
* middle … 中央
* end … テキスト末尾（ltr 言語なら右端）
dominant-baseline垂直方向のベースライン* auto … 通常は下端
* middle … 中央
* hanging … 通常は上端
font-sizeフォントサイズ30
font-weight文字の太さ600
fillテキスト内部の色red, rgb(255, 0, 0),rgba(255, 0, 0, 0.7) #ff0033
fill-opacityテキスト内部の色の透明度。fill 属性で rgba を使って透明度を指定することも可能。0（完全透過）〜 1.0（非透過）
strokeテキスト周囲の線の色red
stroke-widthテキスト周囲の線の太さ2
stroke-opacityテキスト周囲の線の透明度。stroke 属性で rgba を使って透明度を指定することも可能。0（完全透過）〜 1.0（非透過）
text-decorationテキストの装飾* none … デフォルト
* underline … 下線
* line-through … 取消線
opacity要素全体の透明度0（完全透過）〜 1.0（非透過）

text 要素のメモ

  • viewBox 内で水平方向に中央寄せする … x="50%" text-anchor="middle"
  • viewBox 内で垂直方向に中央寄せする … y="50%" dominant-baseline="middle"
  • 部分テキストの装飾 … text 要素の子要素として tspan を配置すると、部分テキストごとにスタイルや位置を設定できます。

line 要素（直線）

line 要素の例
<line x1="30" y1="20" x2="170" y2="20" stroke="red" stroke-width="10" />
<line x1="30" y1="40" x2="170" y2="40" stroke="red" stroke-width="10" stroke-linecap="square" />
<line x1="30" y1="60" x2="170" y2="60" stroke="red" stroke-width="10" stroke-linecap="round" />
<line x1="30" y1="80" x2="170" y2="80" stroke="blue" stroke-width="3" stroke-dasharray="5,5" />
<line x1="30" y1="100" x2="170" y2="100" stroke="blue" stroke-width="3" stroke-dasharray="5,10,5" />
属性説明設定例
x1線の始点 X 座標30, 10%
y1線の始点 Y 座標70, 20%
x2線の終点 X 座標170, 100%
y2線の終点 Y 座標30, 60%
stroke線の色red, rgba(255, 255, 0, 0.5)
stroke-width線の太さ3
stroke-linecap両端の形* butt … デフォルト
* square … 四角（stroke-width の半分だけ長くなる）
* round … 丸
stroke-dasharray破線にする* 5,5 … 5 の線、5 の空白を繰り返す
* 5,10,5 … 5 の線、10 の空白、5 の線、5 の空白、10 の線、5 の空白を繰り返す
stroke-opacity線の透明度（line 要素の場合 opacity と同じ？）0（完全透過）〜 1.0（非透過）
opacity要素全体の透明度0（完全透過）〜 1.0（非透過）

rect 要素（矩形）

rect 要素の例
<rect x="40" y="20" width="100" height="50" rx="10"
    fill="cyan" stroke="blue" stroke-width="4" />
属性説明設定例
x矩形左上の X 座標100
y矩形左上の Y 座標200
width矩形の幅100
height矩形の高さ200
fill塗りつぶし色。塗りつぶしを行わない場合、none あるいは transparent を指定できます。none の場合は場合はそこに何も存在しないかのように扱われます。mouseover などのイベントをハンドルする場合は、transparent の方を指定する必要があります。none, transparent, green, rgb(0, 255, 0), #00ff00, #0f0
fill-opacity塗りつぶしの透明度。fill 属性で rgba を使って透過度を指定することも可能。0（完全透過）〜 1.0（非透過）
stroke枠線の色
stroke-width枠線の太さ。デフォルトは 1。0 が設定されると見えなくなります。1, 1.5, 2
stroke-opacity線の透明度。stroke 属性で rgba を使って透明度を指定することも可能。線の半分の領域は塗りつぶし色の上に重なることに注意。0（完全透過）〜 1.0（非透過）
rx角を丸くするときの半径（水平方向）。省略した場合は ry と同じ値が使われます。通常は rx だけ指定すれば OK です。5
ry角を丸くするときの半径（垂直方向）。省略した場合は rx と同じ値が使われます。通常は rx だけ指定すれば OK です。5
opacity要素全体の透明度0（完全透過）〜 1.0（非透過）
cursorマウスカーソルの形状default, pointer, grab, grabbing, …

circle 要素（円）

circle 要素の例
<circle cx="80" cy="50" r="30" fill="lightgreen" stroke="green" />
属性説明
cx円の中央の X 座標
cy円の中央の Y 座標
r円の半径
fill円の塗りつぶし色
stroke円周の線の色
stroke-width円周の線の太さ

ellipse 要素（楕円）

ellipse 要素の例
<ellipse cx="100" cy="50" rx="50" ry="15" fill="yellow" stroke="orange" />
属性説明
cx楕円の中央の X 座標
cy楕円の中央の Y 座標
rx楕円の水平方向の半径
ry楕円の垂直方向の半径
fill塗りつぶし色
stroke円周の線の色
stroke-width円周の線の太さ

plyline 要素（連続線）

polyline 要素の例
<polyline points="20,10 40,60 60,40 80,90"
    fill="aqua" />
<polyline points="90,10 110,60 130,40 150,90"
    fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" />
<polyline points="160,10 180,60 200,40 220,90"
    fill="aqua" stroke="blue" stroke-width="2" stroke-linecap="round" />
属性説明設定例
points点のリスト。x,y のペアをスペース区切りで並べます10,10 80,60 25,15
fill塗りつぶし色。始点と終点を結ぶラインと、他のラインで囲まれる領域が塗りつぶされます。線だけを引きたい場合は、明示的に none を指定する必要がありますred, none
stroke線の色black
stroke-width線の太さ4
stroke-linecap両端の形* butt … デフォルト
* square … 四角
* round … 丸
stroke-linejoin線の接続部の形* miter … デフォルト
* bevel … 斜めに削る
* round … 丸

始点と終点を自動的に接続するには、polyline の代わりに polygon 要素を使用します。

polygon 要素（多角形）

polygon 要素の例
<polygon points="20,10 40,60 60,40 80,90"
    fill="aqua" />
<polygon points="90,10 110,60 130,40 150,90"
    fill="none" stroke="blue" stroke-width="2" stroke-linejoin="round" />
<polygon points="160,10 180,60 200,40 220,90"
    fill="aqua" stroke="blue" stroke-width="2" stroke-linejoin="round" />

polygon は polyline 要素と異なり、始点と終点を結ぶ線が自動的に引かれて閉じたパスが形成されます（stroke 属性で線の色を指定したときに違いが分かります）。 指定可能な属性は polyline 要素と同様です。

path 要素（パス）

path 要素の例
<path d="M20,30 Q40,5 50,30 T90,30"
    fill="none" stroke="blue" stroke-width="5"/>

path 要素を使うと、複数の直線や曲線を組み合わせた複雑な図形を描くことができます。 path 要素の d 属性に一連のコマンドをスペース区切りで並べることで形状を定義します。

d 属性のコマンド説明
M5,10Move to の略。指定した座標 (5,10) に移動します。描画は行いません。
m5,10上記の相対座標バージョン。現在の座標から (+5,+10) の座標へ移動します。描画は行いません。
L10,20Line to の略。現在座標から指定した座標 (10,20) まで直線を描画します。L は省略可能です。
l10,20上記の相対座標バージョン。現在の座標から (+10,+20) の座標まで直線を描画します。
H75現在の座標から x=75 の位置までの水平線を描画します。
h75上記の相対座標バージョン。現在の座標から x 軸方向へ +75 の位置までの水平線を描画します。
V90現在の座標から y=90 の位置までの垂直線を描画します。
v90上記の相対座標バージョン。現在の座標から y 軸方向へ +90 の位置までの垂直線を描画します。
Z or z現在座標から始点に戻る直線を描画します。
C20,20 40,20 50,103次ベジェ曲線（C の代わりに c を使うとすべて相対座標になる）。
  • 20,20 … 制御点1
  • 40,20 … 制御点2
  • 50,10 … 終点
S50,50 80,803次ベジェ曲線の省略版（S の代わりに s を使うとすべて相対座標になる）。
  • 50,50 … 制御点2
  • 80,80 … 終点
C コマンドに続けてこの S コマンドを使用すると、先行する C コマンドの制御点 2 の反対側に制御点 1 を設置したものとして扱ってくれます。これは、2 つの曲線を滑らかに接続する効果があります。
Q40,5 50,302次ベジェ曲線（Q の代わりに q を使うとすべて相対座標になる）。
  • 40,5 … 制御点
  • 50,30 … 終点
T80,402次ベジェ曲線の省略版（T の代わりに t を使うとすべて相対座標になる）。
  • 80,40 … 終点
Q コマンドに続けてこの T コマンドを使用すると、先行する Q コマンドの制御点の反対側に制御点を設置したものとして扱ってくれます。

カンマとスペースは置き換えが可能です。 例えば、C20,20 40,20 50,10 は C 20 20,40 20,50 10 とも記述できます。

C/S/Q/T コマンドを使ったベジェ曲線や、A コマンドを使った円弧の描画はちょっと分かりにくいので、具体例を別記事としてまとめてあります。

関連記事

チートシート／リファレンス SVG
SVG 関連記事
へ戻る
まくろぐ
サイトマップ ｜ まくへのメッセージ