a コマンドで円を描く

はじめに

円周上にテキストを配置したい場合があるかもしれないので試してみました。

参考:パス - 楕円弧曲線命令

基本図形で描画

単純な図形はあらかじめ用意されていて、それを利用すれば簡単でわかりやすく描画することができます。

参考:基本図形

Sample Text
<svg height='160px' viewbox='-100 -100 200 200'>
    <circle id='circle1' cx='0' cy='0' r='80' style='fill:none;stroke:black;' />
    <text>
        <textPath xlink:href='#circle1'>
            Sample Text
        </textPath>
    </text>
</svg>

残念なことに、基本図形上にはテキストを配置することができません。

やむをえず、a コマンドを使ってパスで円を描く方法を勉強しました

原点を中心に円を描く

試しに描いてみました。

円の下に隙間がありますが、これは仕様です。

テキストを配置できていることが確認できます。

Sample Text

真円にするために始点と終点の座標を同じにしたいのですが、そうすると円が消えてしまいます。

そこで終点位置は始点位置から少しずらしてあげる必要があります。
今回は分かりやすくするために少し大きめに取っています。
実際はもっと小さな値にして z コマンドでパスを閉じるとよいでしょう。

半円ずつ描画して真円を描画してあげましょう。

  <path d='M 0,80 a 80,80 0 1,0 0,-160 a 80,80 0 1,0 0,160' />

M コマンドで始点を決め、a コマンドで円を描画しています。
パラメータは 'rx ry x-axis-rotation large-arc-flag sweep-flag x y' の順に並んでいます。

具体的な効能がピンとこなかったので、一つずつ確認してみました。

rx ry

rx = 40, ry = 40
rx = 120, ry=120
rx = 120, ry = 80

楕円の各半径を決めています。

x-axis-rotation

楕円形の場合のみ効果が現れるので、rx = 80, ry = 60 に設定しています。

x-axis-rotation = 30
x-axis-rotation = 60

時計回りに回っているようです。

large-arc-flag, sweep-flag

効果を分かりやすくするために終点を、x = -80, y = -80 に設定しています。

large-arc-flag = 1, sweep-flag = 0
large-arc-flag = 0, sweep-flag = 0
large-arc-flag = 1, sweep-flag = 1
large-arc-flag = 0, sweep-flag = 1

弧の長さを変更する場合は,large-arc-flag を切り替え、円の向きを変更したい場合は、sweep-flat を切り替えれば良いようです。

x, y

x = -50, y = -50
x = -320, y = 0

移動量が直径を超えると、円が rx,ry よりも大きくなるようです。

A コマンド

a コマンドは終点 (x,y) を始点に対する相対座標で決定します。
絶対座標で指定する場合は A コマンドを利用します。

A コマンドのサンプルです。
始点を右に置いてみました。

<path d='M 80,0 A 80,80 0 1,0 80,5' style='fill:none;stroke:red;' />

参考資料のサンプルのような利用方法を見ていると、色々な活用方法があるように思えます。