svg で描いちゃう!書き方おぼえがき vol.05 【 円弧 A・a 】

どんどんいきましょう!


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

svghowto_4-01

svghowto_4-02


a80,80,

svghowto_4-03


0,0,0,0-140Z

svghowto_4-04

"/>

Q・q :二次曲線 は次の記事で!

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


0,0,0,
最初の状態(短い円弧)。

svghowto_4-05


0,1,0,
使われる円弧が反転(長い円弧)。

svghowto_4-06


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

svghowto_4-07


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

svghowto_4-08



楕円のとき。

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

svghowto_4-09


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

svghowto_4-10


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

svghowto_4-11


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

svghowto_4-12


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

svghowto_4-13


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

svghowto_4-14


書き方のバリエーション

相対座標
<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 で自由な線が描けちゃいますよ!




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -

月別アーカイブ