直線の書き方です。

いっぺんにいっちゃいます！


L・l ：ハンドルを持たない直線
H・h ：水平線
V・v ：垂直線

＜path class="cls-1" d="M50,120h140v-100L50,120Z"/＞

H は、x 座標のみ指定。
V は、y 座標のみ指定。
L は、次のアンカーの座標を指定します。

それぞれ 1点でセグメントを描画します。


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

M50,200




h150




v-100




L50,200Z





"/＞


書き方のバリエーション

相対座標
＜path class="cls-1" d="M50,120h140v-100l-140,100Z"/＞

絶対座標
＜path class="cls-1" d="M50,120H190V20L50,120Z"/＞

最終セグメントが絶対座標
＜path class="cls-1" d="M50,120h140v-100L50,120Z"/＞


polyline・polygon より簡単ですね！

関連記事

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