次はこちら。

C・c で記述したオブジェクトを、S・s を使いながら書いてみましょう！


S・s ：連結したハンドルを持ったベジェ曲線

＜path class="cls-1" d="M50,100c30-30,40-30,70,0s40,30,70,0c0-40-40-60-70-60S50,70,50,100Z"/＞

1 ：次点からのハンドル。
2 ：次点。

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

基点からのハンドルは、
前のセグメントに書かれたハンドルと連結しています。


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

M50,100




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








s40,30,70,0,






c0-40-40-60-70-60








S50,70,50,100Z





"/＞


書き方のバリエーション

相対座標
＜path class="cls-1" d="M50,100c30-30,40-30,70,0s40,30,70,0c0-40-40-60-70-60s-70,30-70,60Z"/＞

絶対座標
＜path class="cls-1" d="M50,100C80,70,90,70,120,100S160,130,190,100C190,60,150,40,120,40S50,70,50,100Z"/＞

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


始点には連結すべきハンドルがないので、
最初のセグメントは、C・c で記述することになります。

関連記事

• svg で描いちゃう！書き方おぼえがき vol.04 【 直線 L・l、H・h、V・v 】
• svg で描いちゃう！書き方おぼえがき vol.03 【 ベジェ曲線 S・s 】
• svg で描いちゃう！書き方おぼえがき vol.02 【 ベジェ曲線 C・c 】