元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【SVG】パス

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」のコマンドでパスデータを設定する。パスデータは手動で設定することができるが、イラレなどのソフトで作成する方が現実的。大文字のコマンド名は絶対座標、小文字のコマンド名は相対座標のコマンドを表す。

まとめ

パスデータは、コマンドを使って手動で作成することができます。しかし、イラレなどのソフトを使ってパスデータを作成する方が現実的です。パスに沿って図形を描画するということができるようになります。