平移 svgs 中的光标位置变化

编程问答 2022-06-01

问题描述

大家好。我正在尝试使用 Pure JS 平移 SVG。这是我的代码：

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>

但这有什么不好，是鼠标的位置。我希望光标总是在中间。但它会改变。 Here is the image of that. （绿色圆圈是光标）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptpanpansvgsvgsvgsvgpanzoom