經歷了暴風重寫之後的感想
計算的時候如果沒有轉換成 SVG 座標系統，SVG移動的位置計算就會以瀏覽器的為主，如果有置中或是padding一定就會偏移，
而且XY軸的方向跟以前數學課上的不一樣，所以在調整位置的時候也容易造成一些疑惑
以下是轉換的程式碼

  private getSVGPoint(event: PointerEvent): DOMPoint {
    const pt = this.svg.createSVGPoint();
    pt.x = event.clientX;
    pt.y = event.clientY;
    return pt.matrixTransform(this.svg.getScreenCTM()!.inverse());
  }

也問了claude瀏覽器座標跟SVG座標的差異，
以下是他給出的回答，實際測試後確實也證實是這個問題

附上體驗位置 瀏覽器座標 vs SVG 座標演示

瀏覽器視窗座標

1. 原點: 位於瀏覽器視窗的左上角。
2. 單位: 以像素(px)為單位。
3. 範圍:
   • x 軸：從左到右增加
   • y 軸：從上到下增加（注意：這與數學中的笛卡爾坐標系不同）
4. 特點:
   • 隨著頁面滾動而變化
   • 受瀏覽器縮放影響
   • 通過 event.clientX 和 event.clientY 獲得

SVG 座標系統

1. 原點: 默認位於 SVG 元素的左上角，但可以通過 viewBox 屬性修改。
2. 單位: 可以是任意單位，由 viewBox 和 SVG 元素的尺寸決定。
3. 範圍:
   • x 軸：從左到右增加
   • y 軸：從上到下增加（注意：這與數學中的笛卡爾坐標系不同）
4. 特點:
   • 獨立於頁面滾動
   • 可以通過 viewBox 進行縮放和平移
   • 需要通過 SVG 的變換矩陣轉換從瀏覽器座標獲得

主要差異

1. 參考系統: 瀏覽器座標參考整個視窗，SVG 座標參考 SVG 元素本身。
2. 縮放行為: SVG 座標系統可以獨立縮放，而不影響其內部元素的相對位置。
3. 精度: SVG 座標可以使用小數，而瀏覽器座標通常是整數像素。
4. 變換: SVG 可以應用各種變換（如旋轉、縮放），而不改變其座標系統。