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, ry:X 軸方向の半径 / Y 軸方向の半径
  • ax:X 軸の回転角度
  • laf:0 → 円弧が180度未満、1 → 円弧が180度以上
  • sf:0 → 反時計回り、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

タグ:

コメントを残す

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