时间戳

首页 > 解决方案 > 为什么 SVG 对象的运动如此不可预测？

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

问题描述

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

我希望我的对象准确地移动到点击用户屏幕的位置！

看看我正在尝试什么：

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

标签： jquerysvgclickviewbox

解决方案

您使用的坐标用于页面。在一个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>

推荐阅读