SVGは、図形だけではなくパスも描画できます。パスを使ってより複雑な形状を描画することができます。パスは、コマンドを記述してパスデータを手動で作成します。しかし、イラレなどのソフトを使ってパスデータを作成する方が現実的です。
path:パスを描画する
<path d="M10,10 L70,10 C140,80 -20,70 50,30" stroke-width="4" stroke="blue" fill="skyblue"/>
属性とコマンド
- d:パスデータを設定
- M(m):移動
- L(l):直線の追加
- C(c):曲線の追加
- A(a):楕円弧の追加
- Z(z):パスを閉じる
d属性にパスデータを設定する。パスデータは、コマンドで設定する。「M、L、C、A、Z」のコマンドでパスデータを設定する。パスデータは手動で設定することができるが、イラレなどのソフトで作成する方が現実的。大文字のコマンド名は絶対座標、小文字のコマンド名は相対座標のコマンドを表す。
まとめ
パスデータは、コマンドを使って手動で作成することができます。しかし、イラレなどのソフトを使ってパスデータを作成する方が現実的です。パスに沿って図形を描画するということができるようになります。
