нахождение координаты центра прямоугольника SVG

Question

Это хлопотно код find coordinates of the middle of a square svg

фрагмент кода ниже здесь не работает. Возможно, вы захотите использовать другой редактор или проверить линг выше для удобства доступа.

$(function() { 
 
\t var ss = { 
 
\t \t "y": 40, 
 
\t \t "x": 4, 
 
\t \t "n": 3, // Speed 
 
\t \t "xD": 0, 
 
\t \t "yD": 0, 
 
\t \t "rotation": 0, 
 
\t \t /*"cx":, This is where I want my coords to change 
 
\t \t "cy":,*/ 
 
\t }; 
 
\t var move; 
 
\t var bbox = document.getElementById("block_green").getBBox(); 
 
\t var ctm = document.getElementById("block_green").getCTM() 
 
\t var cx = bbox.x + bbox.width/2; 
 
\t var cy = bbox.y + bbox.height/2; 
 
\t var pt = document.getElementById("svg").createSVGPoint(); 
 
\t pt.x = cx; 
 
\t pt.y = cy; 
 
\t pt = pt.matrixTransform(ctm); 
 
\t setInterval(move, .01); 
 
\t setInterval(alert(pt.x + ", " pt.y), 20000); 
 

 
\t function move() { 
 
\t \t ss.x = ss.x + (ss.xD * ss.n); 
 
\t \t ss.y = ss.y + (ss.yD * ss.n); 
 
\t \t $("#block_green").attr({ 
 
     y: ss.y, 
 
\t \t \t x: ss.x 
 
    }).css({ 
 
\t \t \t "-webkit-transform" : "rotate("+ ss.rotation +"deg)", 
 
\t \t \t "-moz-transform": "rotate(" + ss.rotation + "deg)", 
 
\t \t \t "-ms-transform": "rotate(" + ss.rotation + "deg)", 
 
\t \t \t "transform": "rotate(" + ss.rotation + "deg)" 
 
\t \t }); 
 
\t } 
 
\t 
 

 
\t $(document).keydown(function(e) { 
 
\t ss.rotation = e.which == 37 ? ss.rotation -2 : ss.rotation; 
 
\t ss.rotation = e.which == 39 ? ss.rotation +2 : ss.rotation 
 
\t \t ss.yD = e.which == 38 ? -1 : ss.yD; 
 
\t \t ss.yD = e.which == 40 ? 1 : ss.yD; 
 
\t \t ss.xD = e.which == 69 ? 1 : ss.xD; 
 
\t \t ss.xD = e.which == 81 ? -1 : ss.xD; 
 
\t e.preventDefault(); 
 
\t }).keyup(function(e) { 
 
\t \t ss.yD = e.which == 38 ? 0 : ss.yD; 
 
\t \t ss.yD = e.which == 40 ? 0 : ss.yD; 
 
\t \t ss.xD = e.which == 69 ? 0 : ss.xD; 
 
\t \t ss.xD = e.which == 81 ? 0 : ss.xD; 
 
\t \t e.preventDefault(); 
 
\t }); 
 
});

body { 
 
\t margin: 0; 
 
\t overflow: hidden; 
 
} 
 

 
svg { 
 
\t background-color: black; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t z-index: 1; 
 
} 
 

 
#block_green { 
 
\t fill: black; 
 
\t stroke: #00ff00; 
 
\t stroke-width: .5px; 
 
}

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

Этот код должен предупредить каждые 20 секунд, координаты квадрата. Чтобы получить координаты центра квадрата, я поставил этот вопрос: How to get Mid point of <g> tag in svg using javascript Если вы используете codepen, вы найдете прорезь в строках 9-16 .

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

FIDDLE