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

Question

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

I want my object to move exactly where user's screen was clicked!

看看我在尝试什么：

 $(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>

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

Why movement of SVG object is so unpredictable?

jquery

svg

click

viewbox