path

コマンド

  • M / mパスの始点に移動する
  • L / l直線を描く
  • H / h水平線を描く
  • V / v垂直線を描く
  • C / c / S / s / Q / q / T / t曲線を描く
  • A / a円弧を描く
  • Z / z始点に向かってパスを閉じる

参考

Paths | MDN

SVG Path | W3Schools

図形の描画と図形のグループ化 | defghi1977

パス | SVG 1.1 第2版 (triple-underscore.github.io)

扇形を描く

M cx, cy L sx, sy A rx, ry  ax laf, sf ex, ey Z

コマンド

  • M コマンド描画の始点を移動する
  • L コマンド直線を描く
  • A コマンド円弧を描く
  • Z コマンド始点に向かってパスを閉じる

パラメータ

  • cx, cy中心座標
  • sx, sy円弧の開始位置
  • rx, ryX 軸方向の半径 / Y 軸方向の半径
  • axX 軸の回転角度
  • laf0 → 円弧が180度未満、1 → 円弧が180度以上
  • sf0 → 反時計回り、1 → 時計回り
  • ex, ey円弧の終了位置
<path d="M 100,100 L 200,100 A 100,100 0 1,1 100,0 Z"/>

参考

SVG で扇形を描く | You Look Too Cool

SVGによる円弧の描画サンプル | 山本ワールド

円弧 – Paths | MDN

pathLength

参考

pathLength | MDN

getTotalLength

参考

SVG path の長さを取得する方法 & アニメーションのデモ | Stronghold Archive

Path Length Calculator

参考

Path Length Calculator | CodePen

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です