Javascript 矩形svg中心坐标的求法

这是一个麻烦的代码

下面的代码片段在这里不起作用。您可能需要使用另一个编辑器或检查上面的lin以便于访问

$（函数（）{
变量ss={
“y”：40，
“x”：4，
“n”：3，//速度
“xD”：0，
“yD”：0，
“旋转”：0，
/*“cx”：“这是我希望我的合作伙伴改变的地方
“cy”：*/
};
var移动；
var bbox=document.getElementById（“block_green”）.getBBox（）；
var ctm=document.getElementById（“block_green”）.getCTM（）
var cx=bbox.x+bbox.width/2；
变量cy=bbox.y+bbox.height/2；
var pt=document.getElementById（“svg”）.createSVGPoint（）；
pt.x=cx；
pt.y=cy；
pt=pt.基质转化（ctm）；
设置间隔（移动0.01）；
设置间隔（警报（点x+”，“点y”），20000；
函数move（）{
ss.x=ss.x+（ss.xD*ss.n）；
ss.y=ss.y+（ss.yD*ss.n）；
$（“#绿色块”）.attr({
y:ss.y，
x:ss.x
}).css({
“-webkit变换”：“旋转（“+ss.rotation+”deg）”，
“-moz变换”：“旋转（“+ss.rotation+”deg）”，
“-ms变换”：“旋转（“+ss.rotation+”deg）”，
“变换”：“旋转（“+ss.旋转+”度）”
});
}
$（文档）.keydown（函数（e）{
旋转=e，哪个=37？旋转-2：旋转；
旋转=e，哪个=39？旋转+2：旋转
ss.yD=e.which==38？-1:ss.yD；
ss.yD=e.which==40？1:ss.yD；
ss.xD=e.which==69？1:ss.xD；
ss.xD=e.which==81？-1:ss.xD；
e、 预防默认值（）；
}).keyup（功能（e）{
ss.yD=e.which==38？0:ss.yD；
ss.yD=e.which==40？0:ss.yD；
ss.xD=e.which==69？0:ss.xD；
ss.xD=e.which==81？0:ss.xD；
e、 预防默认值（）；
});
});
正文{
保证金：0；
溢出：隐藏；
}
svg{
背景色：黑色；
宽度：100vw；
高度：100vh；
z指数：1；
}
#布洛克绿{
填充：黑色；
行程：#00ff00；
笔划宽度：.5px；
}
您可以通过将元素变换应用到其中心来实现这一点。这种方法是从局部空间获得绝对坐标的一般方法。其思想是：通过直接使用属性值，在局部坐标中计算矩形的中心。然后将svg元素的转换应用到该点

var svg = document.getElementById('root'),
    rect = document.getElementById('block_green'),
    x = rect.x.baseVal.value,
    y = rect.x.baseVal.value,
    w = rect.width.baseVal.value,
    h = rect.height.baseVal.value,
    c = svg.createSVGPoint(),
    mtr = rect.getTransformToElement(svg);

 c.x = x + w/2;
 c.y = y + h/2;

 c = c.matrixTransform(mtr);

首先，您的代码中有一个语法错误，会阻止其执行：

setInterval(alert(pt.x + ", " pt.y), 20000);

需要

setInterval(alert(pt.x + ", " + pt.y), 20000);

但这不是重点。您尝试设置间隔的方式将无法按预期工作。它不会重复调用
alert（）
，而是在调用
setInterval（）
时，对表达式
alert（pt.x+“，“+pt.y）
求值一次。因此，您将看到一个初始警报弹出窗口，打印
pt
的起始值。表达式最终将计算为
undefined
，这将作为
setInterval（）
的第一个参数，即重复调用的函数称为
undefined
，这显然不是您最初想要的

如果希望在重复调用时提醒rect的更新值，则需要将rect的中心计算封装在函数中。然后可以将引用传递给函数，而不是
undefined
传递给
setInterval（）
。请查看我的，以了解它对您的工作方式：

function getCenter() {
    var bbox = document.getElementById("block_green").getBBox();
    var ctm = document.getElementById("block_green").getCTM()
    var cx = bbox.x + bbox.width/2;
    var cy = bbox.y + bbox.height/2;
    var pt = document.getElementById("svg").createSVGPoint();
    pt.x = cx;
    pt.y = cy;
    return pt.matrixTransform(ctm);
}        

setInterval(function() {
    var pt = getCenter();
    alert(pt.x + ", " + pt.y);
}, 20000);

链接问题的答案就是这样。请确切解释为什么这个答案不能解决你的问题。@RobertLongson当我用同样的代码找到我的一个盒子的坐标时，它似乎不起作用，这让我觉得动画和css3转换可能与此有关。那么你需要在问题中添加这样一个测试用例。@RobertLongson谢谢你，我会确保添加it@RobertLongson完成后，您现在可以看到我要完成的内容了！：）对不起，刚刚更新到一个更完整和更详细的描述什么我需要的请求没有说是你！但是谢谢你支持我的努力！！这不应该是：“x=rect.x.baseVal.value，y=rect.x.baseVal.value”，应该是“x=rect.x.baseVal.value，y=rect.y.baseVal.value，y=rect.y…”。。。万一你错过了。因此，代码不起作用。我尝试了JSFIDLE，它会提醒“[object SVGPoint]”而不是像这样的实际点：
（x，y）
我编辑了我的答案并更新了，以更好地适应您的问题。