以下のテンプレートを使って,SVGの学習をしていきましょう。
(注)IE8はSVGに対応しておりません。
基本図形
図形 | 命令 | 属性 | サンプル文 |
---|---|---|---|
四角形 | rect | x, y(左上の座標) width, height(幅,高さ) stroke(輪郭線の色) fill(塗りつぶしの色) | <rect x="10" y="10" width="90" height="120" stroke="red" fill="blue" /> |
円 | circle | cx, cy(中心の座標) r(半径) stroke(輪郭線の色) fill(塗りつぶしの色) | <circle cx="100" cy="100" r="80" stroke="red" fill="blue" /> |
楕円 | ellipse | cx, cy(中心の座標) rx(横半径) ry(縦半径) stroke(輪郭線の色) fill(塗りつぶしの色) | <ellipse cx="100" cy="100" rx="80" ry="60" stroke="red" fill="blue" /> |
直線 | line | x1, y1(始点の座標) x2, y2(終点の座標) stroke(輪郭線の色) | <line x1="10" y1="10" x2="90" y2="90" stroke="red" /> |
折れ線 | polyline | points(座標の並び) stroke(輪郭線の色) | <polyline points="10, 10, 100, 100, 10, 100" stroke="red" fill="blue" /> |
多角形 | polygon | points(座標の並び) stroke(輪郭線の色) | <polygon points="10, 10, 100, 100, 10, 100" stroke="red" fill="blue" /> |
パス
図形 | 命令 | 属性 | サンプル文 |
---|---|---|---|
パス | path | d(コマンド列) stroke(輪郭線の色) fill(塗りつぶしの色) | <path d="M 100, 100, L 200, 100, 200, 200, 100, 200" stroke="red" fill="blue"/> |
パスのコマンド一覧
図形 | コマンド内容 | あとに続く数値の内容 |
---|---|---|
M | 移動 | 点座標,点座標,… |
L | 直線 | 点座標,点座標,… |
H | 水平線 | x座標 |
V | 垂直線 | y座標 |
Q | 二次ベジェ曲線 | 制御点座標,頂点座標,制御点座標,頂点座標,… |
T | 二次ベジェ曲線 (制御点は自動計算) | 頂点座標,頂点座標,… |
C | 三次ベジェ曲線 | 制御点1座標,制御点2座標,頂点座標,制御点1座標,制御点2座標,頂点座標,… |
S | 三次ベジェ曲線 (制御点1は自動計算) | 制御点2座標,頂点座標,制御点2座標,頂点座標,… |
A | 円弧 | x半径,y半径,回転角,0なら短弧で1なら長い弧, 0なら反時計回りで1なら時計回り, 終点座標 |
Z | パスを閉じる |
画像
図形 | 命令 | 属性 | サンプル文 |
---|---|---|---|
画像 | image | x, y(左上座標) width(幅) height(高さ) xlink:href(画像URL) | <image x="100" y="100" width="450" height="335" xlink:href="sample.jpg" /> |