どんどんいきましょう！


A・a ：円弧

＜path class="cls-3" d="M200,100q35,35,0,70-35,35,0,70a80,80,0,0,0,0-140Z"/＞

A の直前の座標が円弧の基点。
以後 5つの数値が円弧の設定です。

1 ：次の 2つの数値は、円の x軸半径，y軸半径。
2 ：次の 3つの数値は、円弧の指定。
3 ：終点の座標。

円弧の設定と終点でセグメントを描画します。


＜path class="cls-3" d="

M200,100q35,35,0,70-35,35,0,70






a80,80,




0,0,0,0-140Z



"/＞

Q・q ：二次曲線 は次の記事で！

円弧の設定 a80,80,0,0,0, の変化でーす。


0,0,0,
最初の状態（短い円弧）。




0,1,0,
使われる円弧が反転（長い円弧）。




0,0,1,
円弧が鏡面に反転。




0,1,1,
使われる円弧が反転し、
かつ、鏡面に反転。





楕円のとき。

100,80,0,0,0,
x軸を変更・最初の状態（短い円弧）。




100,80,0,1,0,
使われる円弧が反転（長い円弧）。




100,80,0,0,1,
円弧が鏡面に反転。




100,80,0,1,1,
使われる円弧が反転し、
かつ、鏡面に反転。




100,80,30,0,0,
楕円の回転。




100,80,30,1,1,
楕円の回転。
円弧の反転。
鏡面。




書き方のバリエーション

相対座標
＜path class="cls-3" d="M200,100q35,35,0,70-35,35,0,70a80,80,0,0,0,0-140Z"/＞

絶対座標
＜path class="cls-3" d="M200,100q35,35,0,70-35,35,0,70A80,80,0,0,0,200,100Z"/＞

相対か絶対かは、終点の座標の書き方です。
円弧の設定に違いはありません。


ここまでができれば、svg で自由な線が描けちゃいますよ！

関連記事

• svg で描いちゃう！書き方おぼえがき vol.06 【 二次曲線 Q・q 】
• svg で描いちゃう！書き方おぼえがき vol.05 【 円弧 A・a 】
• svg で描いちゃう！書き方おぼえがき vol.04 【 直線 L・l、H・h、V・v 】