SVGで基本的な図形を描く
SVGは以下のような基本的な図形およびベジエ曲線などのパスを組み合わせて複雑な図形を描きます。図形には色や線の太さなどを指定するための属性が用意されており、属性値はJavaScriptで制御できます。
| 図形 | SVGタグ |
|---|---|
| 四角形／角丸四角形 | <rect> |
| 正円 | <circle> |
| 楕円 | <ellipse> |
| 直線 | <line> |
| 連続直線 | <polyline> |
| 多角形 | <polygon> |
順番に試してみましょう。すでに四角形はサンプル1で試したので、次に角丸四角形を描くコードを示します。角丸四角形はry属性に角丸半径を指定し、ry="10"とすると半径10pxの角丸四角形を描けます。
四角形など図形を塗りつぶす色はfill属性で指定します。指定できる値はカラー名や16進数値です。同様に線の色はstroke属性で指定します。塗り色や線が不要な場合は"none"の文字を指定します。
サンプル2は赤色の線で囲み、黄色く塗りつぶした角丸四角形を描きます。
■サンプル2[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>SVG：角丸四角形を描く</title> </head> <body> <h1>SVG：角丸四角形を描く</h1> <svg> <rect x="0.5" y="0.5" fill="#ffff00" stroke="#ff0000" width="100" height="80" ry="10" /> </svg> </body> </html>
正円を描く
正円は<circle>タグを使い、円の中心X座標をcx属性で、中心Y座標をcy属性で、円の半径をr属性で指定します。色や線はfill、stroke属性で設定できます。
サンプル3は赤色の線で囲み、黄色く塗りつぶした正円を描きます。
■サンプル3[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>SVG：正円を描く</title> </head> <body> <h1>SVG：正円を描く</h1> <svg> <circle cx="100" cy="80" r="40" fill="#ffff00" stroke="#ff0000" /> </svg> </body> </html>
楕円を描く
SVGでは正円と楕円の扱いが分かれており、楕円は<ellipse>タグを使って描きます。楕円の中心位置は正円の時と同じくcx、cy属性を使って指定し、横方向の半径はrx、縦方向の半径はry属性で指定できます。色や線などはこれまで説明した図形と同じようにfillとstroke属性で指定できます。
サンプル4は横の半径90ピクセル、縦の半径40ピクセルの楕円を描きます。
■サンプル4[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>SVG：楕円を描く</title> </head> <body> <h1>SVG：楕円を描く</h1> <svg> <ellipse cx="100" cy="80" rx="90" ry="40" fill="#ffff00" stroke="#ff0000" /> </svg> </body> </html>
