我试图使用click()方法移动SVG对象，但该对象没有移动到我希望它移动的地方。
我想要我的对象移动到用户的屏幕被点击的地方！
看看我正在尝试的内容:
null
$(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>null
您使用的坐标是页面的坐标。 在SVG中。 首先，您需要svg原点的坐标。 此外，您正在设置一个viewBox，它会改变那些坐标的解释方式。 幸运的是，javascript提供了一些函数和对象来提供帮助。 主要是，您需要阅读有关getScreenTM()的内容。 下面是一个例子，它带有一个负责转换的函数:
null
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>