SVGは図形を表す要素を指定することで描画を実行します。
SVGは下記の表に示す図形要素があります。
| 要素 | 説明 |
|---|---|
| rect | 四角形・角丸四角形 |
| circle | 正円 |
| ecllipse | 楕円形 |
| line | 直線 |
| polyline | 連続直線 |
| polygon | 多角形 |
| path | パス(複雑な図形を描画) |
| text | 文字 |
D3.jsではすべての図形要素を使うことはまずないです。
使いそうなのは以下のものです。
１．rect 四角形・角丸四角形
２．circle 正円
３．path パス(複雑な図形を描画)
４．text 文字
rect要素を使い、四角形・角丸四角形を描画する
rect要素は下記の表の属性を指定することで四角形を描画できます、
D3.jsでもこれらの属性値を設定することで四角形を描画します。
| 属性 | 説明 |
|---|---|
| x | X座標 省くと０ |
| y | Y座標 省くと０ |
| width | 横幅 |
| height | 高さ |
| rx | 横方向の角丸半径 |
| ry | 縦方向の角丸半径 |
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <script src="../js/d3.js"></script> </head> <body> <h1>四角形を書いてみる</h1> <svg> <rect x="50" y="50" width="100" height="180" /> </svg> <h1>角丸四角形を書いてみる</h1> <svg> <rect x="120" y="20" width="80" height="100" rx="16" ry="32" /> </svg> <script src="test.js"></script> </body> </html> |