javascript - Cursor position changing in panning svgs

Question

H i everyone. I'm trying to pan SVG using Pure JS. Here is my code:

var Fall = false;
var Ord = 30,
    Ord2 = 30;

function mouseZ(event) {
  Fall = true;
  TheSvGZ = document.getElementById("FD");
  MousePosition = event.clientX;
  MousePosition2 = event.clientY;
}

function mouseS(event) {
  if (Fall == true) {

    MousePositionDifference = event.clientX - MousePosition;
    MousePositionDifference2 = event.clientY - MousePosition2;
    TheSvGZ.setAttribute("viewBox", (Ord-MousePositionDifference).toString() + " " + (Ord2- 
    MousePositionDifference2).toString() + " " + "140" + " " + "140");
    
  }
}

function MousE (event){

Fall = false;   
        /*Ord=event.clientX - rect.left;
    Ord2=event.clientY - rect.top;*/
    OrdM = TheSvGZ.getAttribute("viewBox").replace(/70/g, "").trim().split(" ");
    Ord = Number(OrdM[0]);
    Ord2 = Number(OrdM[1]);
}

  #ellipse1 {
    fill: blue;
  }

  #ellipse2 {
    fill: red;
  }

<svg onpointerdown="mouseZ(event)" onpointermove="mouseS(event)" onpointerup="MousE(event)" onpointerleave="MousE(event)" id="FD" width="200" height="200" style="border: 1px solid blue" viewBox="30 30 140 140">



  <line x1="0" y1="0" x2="200" y2="200" style="stroke:red"></line>

  <ellipse id="ellipse1" cx="100" cy="100" rx="50" ry="50"></ellipse>
  <ellipse id="ellipse2" cx="100" cy="100" rx="40" ry="40"></ellipse>



</svg>

Answer 1

等待大神答复