Javascript 我的svg矩形运动

我想移动到一个矩形。当它到达行的末尾时，换行并将其放在下一行的开头。矩形没有很好的坐标使线中断。有什么想法吗？这是我的职责：

<script type="text/javascript"><![CDATA[
    var rect = document.getElementById('player');
    var x = rect.getAttribute('x')*1,
        y = rect.getAttribute('y')*1;
    setInterval(move, 30);

    function move()
    {
        if (rect.getAttribute('x') < 500){
            rect.x.baseVal.value = ++x;
        }
        else if (rect.getAttribute('x') >= 500){
            rect.x.baseVal.value = x-250;
            rect.y.baseVal.value = y+250;
        }
    }
    ]]></script>

=500）{
rect.x.baseVal.value=x-250；
rect.y.baseVal.value=y+250；
}
}
]]>

---

谢谢

从元素获取值是不必要的昂贵，在您的情况下，获取或设置值似乎太晚了。不要在每个循环上获取值，而是跟踪a for

x

和

y

：

var rect = document.getElementById('player');
var x = rect.getAttribute('x')*1,
    y = rect.getAttribute('y')*1;
var pos_x = 0, pos_y = 0;
setInterval(move, 30); 

function move(i)
{
    pos_x++;
    if (pos_x < 500){
        rect.setAttribute('x', pos_x);
    }
    else {
        pos_y +=10
        pos_x = 0;
        rect.setAttribute('x', pos_y);
        rect.setAttribute('y', pos_y);
    }
}​

var rect=document.getElementById（'player'）；
var x=rect.getAttribute（'x'）*1，
y=rect.getAttribute（'y'）*1；
var pos_x=0，pos_y=0；
设置间隔（移动，30）；
功能移动（一）
{
pos_x++；
如果（位置x<500）{
rect.setAttribute（'x'，pos_x）；
}
否则{
位置y+=10
pos_x=0；
rect.setAttribute（'x'，pos_y）；
rect.setAttribute（'y'，pos_y）；
}
}​

可能存在的副本