Javascript动画-SVG形状消失

我刚刚进入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);
      }

HTML
Javascript
函数形状（obj）{
var newX=obj.getAttribute（“x”）+5；
var newY=obj.getAttribute（“y”）+5；
对象setAttribute（“x”，newX）；
对象设置属性（“y”，newY）；
}

属性是字符串，Javascript处理字符串和数字的方式非常草率

你实际做的是在“100”中加上“5”，结果得到“1005”

如果在修改属性之前将其转换为整数，那么代码将正常工作

函数移动形状（obj）{
var newX=parseInt（obj.getAttribute（“x”））+5；
var newY=parseInt（obj.getAttribute（“y”））+5；
对象setAttribute（“x”，newX）；
对象设置属性（“y”，newY）；
}

@user3602839没问题：-）顺便说一下，如果这些坐标可能不是整数，请使用

parseFloat（）

而不是

parseInt（）

。