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

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

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

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




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








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








0-40-40-60-70-60








C90,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-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"/＞


どうでしょうか？

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

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

関連記事

• svg で描いちゃう！書き方おぼえがき vol.03 【 ベジェ曲線 S・s 】
• svg で描いちゃう！書き方おぼえがき vol.02 【 ベジェ曲線 C・c 】
• svg で描いちゃう！書き方おぼえがき vol.01 【 基本 】