SVGで円弧を描くには、
<path>タグの仕様
■基本形
<path d="M x1 y1
A rx ry
katamuki
f1 f2
x2 y2"
fill="none" stroke="black" />
| パラメータ | 意味 | 備考 |
|---|---|---|
| x1,y1 | 円弧の開始座標 | |
| x2,y2 | 円弧の終了座標 | |
| rx,ry | 円のx軸半径とy軸半径 | |
| katamuki | 傾き(度数) | |
| f1 | 0)180度未満の円弧 1)180度以上の円弧 | 二点間を通る楕円は二種類存在するため、円弧のどの部分を描画するかをf1,f2で指定する。 |
| f2 | 0)半時計回りの円弧 1)時計回りの円弧 |
■サンプルコード
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>SVG -パス</title>
<style>
#chart {
background: #ffbbff;
}
</style>
<body>
<svg id="chart" width="300" height="230">
<path d="M90 70
A80 60
0 0 0
190 160
" fill="none" stroke="darkgreen" />
<path d="M90 70
A80 60
0 0 1
190 160
" fill="none" stroke="red" />
<path d="M90 70
A80 60
0 1 0
190 160
" fill="none" stroke="blue" />
<path d="M90 70
A80 60
0 1 1
190 160
" fill="none" stroke="white" />
</svg>
</body>
</html>
(実行結果)
| 描画色 | f1(円弧の長さ) | f2(描画の向き) |
|---|---|---|
| 緑 | 0(短い方) | 0(反時計回り) |
| 赤 | 0(短い方) | 1(時計回り) |
| 青 | 1(長い方) | 0(反時計回り) |
| 白 | 1(長い方) | 1(時計回り) |
