svg で描いちゃう!書き方おぼえがき vol.02 【 ベジェ曲線 C・c 】

ここからは、各種類のパスの書き方です。

記述のバリエーションは、3種。

基点は絶対座標で記述したあと。

1 :相対座標で書く
2 :絶対座標で書く
3 :混在で書く

例文は、最終セグメントが絶対座標の混在タイプです。


C・c :独立したハンドルを持ったベジェ曲線

<path class="cls-1" d="M50,100c30-30,40-30,70,0,30,30,40,30,70,0,0-40-40-60-70-60C90,40,50,70,50,100Z"/>

M の直後が始点の座標。

次のアルファベットで曲線の種類を指定。

1 :基点からのハンドル。
2 :次点からのハンドル。
3 :次点。

の 3点でセグメントを描画します。

セグメントごとに分解してみましょう!


<path class="cls-1" d="

M50,100

svghowto_1-01


c30-30,40-30,70,0,

svghowto_1-02

svghowto_1-03

svghowto_1-04


30,30,40,30,70,0,

svghowto_1-05

svghowto_1-06

svghowto_1-07


0-40-40-60-70-60

svghowto_1-08

svghowto_1-09

svghowto_1-10


C90,40,50,70,50,100Z

svghowto_1-11

svghowto_1-12

svghowto_1-13

"/>


書き方のバリエーション

相対座標
<path class="cls-1" d="M50,100c30-30,40-30,70,0,30,30,40,30,70,0,0-40-40-60-70-60-30,0-70,30-70,60Z"/>

絶対座標
<path class="cls-1" d="M50,100C80,70,90,70,120,100, 150,130,160,130,190,100,190,60,150,40,120,40,90,40,50,70,50,100Z"/>

最終セグメントが絶対座標
<path class="cls-1" d="M50,100c30-30,40-30,70,0,30,30,40,30,70,0,0-40-40-60-70-60C90,40,50,70,50,100Z"/>


どうでしょうか?

画像にすると理解しやすいと思います。
そして、別に難しいことでもないのがわかるでしょ!

こんな調子で、データを見ていきますね!!




関連記事

コメント

非公開コメント

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 - - - -

月別アーカイブ