パスの使い方 (path) [SVG]

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 第２版 (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