为什么SVG对象的运动是如此不可预测？

Question

我正在尝试使用SVG object方法移动click()，但是对象没有移动到我想要移动的位置。

我希望我的对象精确移动到单击用户屏幕的位置！

看看我在尝试什么：

 $(function() {
    // alert("click somewhere on your screen");
    $(window).on("click", function(e) {
      var xco = e.pageX;
      var yco = e.pageY;
      $("circle").animate({
        "cx": xco,
        "cy": yco
      }, 1000);
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg viewBox="10 10 80 80" style="height:80vh; width:80vw; border:2vw solid black;">
    <circle cx="20" cy="10" r="5" fill="yellow" stroke-width="1" stroke="black" />
</svg>

Answer 1

您正在使用的坐标用于页面。在svg中。首先，您需要svg原点的坐标。另外，您正在设置一个viewBox，它会更改这些坐标的解释方式。幸运的是，javascript提供了一些可以帮助您的函数和对象。主要，您需要阅读有关getScreenCTM()的信息。下面是一个具有转换功能的示例：

function transformAbsPoint(x, y){
  var svg = $("#svgel")[0];
  var pt = svg.createSVGPoint();
  pt.x = x;
  pt.y = y;
  var loc = pt.matrixTransform(svg.getScreenCTM().inverse());
  return [loc.x, loc.y];
}

 $(function() {
    // alert("click somewhere on your screen");
    $(window).on("click", function(e) {
      var pt = transformAbsPoint(e.clientX, e.clientY);
      $("circle").animate({
        "cx": pt[0],
        "cy": pt[1]
      }, 1000);
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg id="svgel" viewBox="10 10 80 80" style="height:80vh; width:80vw; border:2vw solid black;">
    <circle cx="20" cy="10" r="5" fill="yellow" stroke-width="1" stroke="black" />
</svg>