Javascript Animation - форма SVG исчезает

Question

Я просто попадаю в JS, поэтому мне может что-то не хватает. Я пытаюсь анимировать прямоугольник SVG с помощью мыши, чтобы форма, казалось, «убегала» от мыши. Когда я пытаюсь изменить x и y, добавляя к ним, форма исчезает. Если я вычитаю, он ведет себя так, как ожидалось.

Любая помощь была бы принята с благодарностью.

HTML 
    <svg width="1200" height="600"> 
     <rect x="100" y="100" width="100" height="100" id="firstShape" onmouseover="moveShape(firstShape);">    
    </svg> 
Javascript 
    function moveShape(obj) { 
       var newX = obj.getAttribute("x") + 5; 
       var newY = obj.getAttribute("y") + 5;   
       obj.setAttribute("x", newX); 
       obj.setAttribute("y", newY); 
     } 

Answer 1

Атрибуты представляют собой строки, и Javascript очень неаккуратно о том, как он обрабатывает строки и числа.

Что вы на самом деле делаете, это добавление «5» в «100» и получение «1005» в результате.

Если вы измените атрибуты на целые числа до их изменения, тогда ваш код будет работать нормально.

function moveShape(obj) { 
 
    var newX = parseInt(obj.getAttribute("x")) + 5; 
 
    var newY = parseInt(obj.getAttribute("y")) + 5; 
 
    obj.setAttribute("x", newX); 
 
    obj.setAttribute("y", newY); 
 
}

<svg width="1200" height="600"> 
 
    <rect x="100" y="100" width="100" height="100" id="firstShape" onmouseover="moveShape(firstShape);">    
 
</svg>