SVGについて – パス(円孤)について – propansystem[プロパンシステム]

SVGについて – パス(円孤)について

円孤について(正円)

今回はパス(円孤)の使い方について、調べてみます。

円孤を出力するコマンドは Aで記載します。
円孤は開始、終了の座標の値により、描かれるパスが変わり正円と楕円になります。
また、x軸とy軸の方向にどれだけの長さで線を描画するかで、正円か楕円かが決まります。
(注：円の種類を決める目的で座標を決める訳ではなく、結果的に正円か楕円の描画になるかならないかです)

簡単なサンプルを書きました。
[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test1.html)

画面にアクセスすると、以下の円孤が表示されます。

孤がどのように描画されるかのポイントとなる点は、 M と A のパラメータの値です。

例えば、以下のパラメータの場合、
[js]
M 20 20
A 20 20 0 0 1 100 100
[/js]

それぞれのパラメータの意味は次のようになります。

パラメータの値の下の行に、汎用的な名称を記載しています。
[js]
M 20 20
x1 y1

A 20 20 0 0 1 100 100
rx ry k f1 f2 x2 y2
[/js]

各パラメータの意味は以下のようになります。

[js]
x1 円弧の開始 x座標
y1 円弧の開始 y座標
rx 円のx軸半径
ry 円のy軸半径
k 回転度(プラスで右方向、マイナスで左方向)
f1 0 : 180未満の円弧
1 : 180以上の円弧
f2 0 : 正の角度で動き始めるか (反時計回りに描画)
1 : 負の角度で動き始めるか (時計回りに描画)
x2 円弧の終了 x座標
y2 円弧の終了 y座標
[/js]

上記のサンプルでは、描画される孤は x軸方向、y軸方向の開始座標、終了座標が同じ座標を示しており、正円の軌道になります。

円孤について(楕円)

サンプルを少し変更して、次のコードを用意しました。
[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test2.html)

画面にアクセスすると、以下の円孤が表示されます。

先ほどのサンプルから、A のパラメータを以下のように変更しました。

[js]
A 20 30 0 0 1 100 150
[/js]

最初のサンプルとは違い、開始点から描画される円の「x方向の半径」、「y方向の半径」が異なります。
また、引数の最後の終了x座標、終了y座標も異なります。

このパラメータ指定の場合は、正円の孤にはならず、楕円上の軌道で描画されます。

円孤について(他のパラメータ)

それでは、2つ目のサンプルを調整し、他のパラメータを変更してみます。

Aのパラメータの第三引数が回転度になるので、
それぞれ、0度、45度、90度、135度、180度の指定を試してみます。

Aのみを抜粋すると、以下です。
[js]
A 20 30 0 0 1 100 150
A 20 30 45 0 1 100 150
A 20 30 90 0 1 100 150
A 20 30 135 0 1 100 150
A 20 30 180 0 1 100 150
[/js]

HTML全体は次のようになります。
[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test3.html)

画面にアクセスすると、以下の円孤が表示されます。

それぞれの度数によって、楕円の座標の描画が回転して描画されます。
ただ、0度の出力と、180度の出力は同じ結果になります。