我的svg矩形運動

Question

我想要移動到一個矩形。當它到達行的末尾時，進行換行並將其放在下一行的開頭。該矩形沒有很好的座標來實現換行。有任何想法嗎？這是我的函數：

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

謝謝！

Answer 1

從元素中獲取價值是不必要的昂貴，在你的情況下，它似乎是得到或設置值太晚。非但沒有在每次循環中值跟蹤的爲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); 
    } 
}​ 

http://jsfiddle.net/gMwMb/