使用setTimeout动态更改svg元素的属性不能按预期工作

Question

我试图通过setTimeout递归调用moveSelected函数将SVG移动到X，Y. moveSelected函数依次将新的x和y设置为更接近X，Y以重现动画效果。

这是我的功能：

this.moveSelected = function moveSelected(moveToHex) {
    //setting new cords on screen
    var self=this;
    var repeater;

    var curX = parseInt(this.selectedEle.getAttribute('cx'));
    var curY = parseInt(this.selectedEle.getAttribute('cy'));

    //console.log('curX '+curX+'curY ',curY);
    if(curX < moveToHex.cx) //moveRight
    {
        this.selectedEle.setAttribute('cx', curX + .5);
    }

    if(curX > moveToHex.cx) //moveLeft
    {
        this.selectedEle.setAttribute('cx',curX-.5);
    }

    if(curY < moveToHex.cy) //movedown
    {
        console.log('move down');
        this.selectedEle.setAttribute('cy', curY + .5);
    }

    if(curY > moveToHex.cy) //moveup
    {
        console.log('move Up');
        this.selectedEle.setAttribute('cy', curY - .5);
    }

    console.log('condition:' + curY + '<' + parseInt(moveToHex.cy));

    if((Math.abs(curY - moveToHex.cy)) < 1 &&
       (Math.abs(curX - moveToHex.cx) < 1)) {
        clearTimeout(repeater);
        unitArray[this.selectedUnit.num].hexagon = moveToHex;
        console.log('cleared');
    }
    else if(!repeater) {
        repeater = setTimeout(function() {
            self.moveSelected(moveToHex)
        }, 25); 
    }
}

现在一切都按预期工作，但是moveown和moveRight条件，即curY + .5和curX + .5。

我试着安慰这些值，但不明白为什么它的表现如此。我认为这是类型转换问题，但是将curX和curY类型转换为int也无济于事

小提琴： AngularJS ngModel（滚动到右侧的两个可移动圆圈）