我的svg矩形移动

My svg rectangle movement

本文关键字：移动 svg 我的      更新时间：2023-09-26

我想移动到一个矩形。当它到达行的末尾时，换行并将其放在下一行的开头。矩形不采用良好的坐标来使线断开。有什么想法吗？这是我的功能：

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

谢谢！

从元素中获取值是不必要的昂贵，而且在您的情况下，获取或设置值似乎为时已晚。不获取每个循环上的值，而是跟踪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/

相关文章：