Question

这是麻烦的代码find coordinates of the middle of a square svg

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

＆＃13;

$(function() {
	var ss = {
		"y": 40,
		"x": 4,
		"n": 3, // Speed
		"xD": 0,
		"yD": 0,
		"rotation": 0,
		/*"cx":, This is where I want my coords to change
		"cy":,*/
	};
	var move;
	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;
	pt = pt.matrixTransform(ctm);
	setInterval(move, .01);
	setInterval(alert(pt.x + ", " pt.y), 20000);

	function move() {
		ss.x = ss.x + (ss.xD * ss.n);
		ss.y = ss.y + (ss.yD * ss.n);
		$("#block_green").attr({
      y: ss.y,
			x: ss.x
    }).css({
			"-webkit-transform" : "rotate("+ ss.rotation +"deg)",
			"-moz-transform": "rotate(" + ss.rotation + "deg)",
			"-ms-transform": "rotate(" + ss.rotation + "deg)",
			"transform": "rotate(" + ss.rotation + "deg)"
		});
	}
	

	$(document).keydown(function(e) {
	  ss.rotation = e.which == 37 ? ss.rotation -2 : ss.rotation;
	  ss.rotation = e.which == 39 ? ss.rotation +2 : ss.rotation
		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.preventDefault();
	}).keyup(function(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.preventDefault();
	});
});

＆＃13;

body {
	margin: 0;
	overflow: hidden;
}

svg {
	background-color: black;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}

#block_green {
	fill: black;
	stroke: #00ff00;
	stroke-width: .5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="svg">
	<rect x="4" y="4" width="80" height="60" id="block_green"/>
</svg>

＆＃13;

此代码应每隔20秒发出警报，方块的坐标。为了得到广场中心的坐标，我试过这个问题： How to get Mid point of <g> tag in svg using javascript 如果您使用的是codepen，则会在9-16行中找到问题＆amp; 18。

Answer 1

首先，代码中存在语法错误，会阻止其执行：

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

需要

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

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

如果您希望让重复呼叫的更新值发出警报，您需要在函数中包含rect中心的计算。然后，您可以将引用传递给函数，而不是undefined传递给setInterval()。检查我的JSFiddle是否适用于您：

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);

Answer 2

您可以通过将元素转换为其中心来实现。这种方式是从局部空间获得绝对坐标的一般方法。这个想法是：通过直接使用属性值计算局部坐标中矩形的中心。然后，将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);

default Foundation breakpoints

找到矩形svg中心的坐标

2 个答案: