使用箭头键移动SVG元素

Question

I am dynamically placing svg text elements on a template wrapped in a svg group. I need the user to have the functionality of moving each element individually with the keyboard arrow keys after it is clicked/focused. My current code below has some issue. 1. The arrow key will move the element once and then I get the error: Unexpected value translate(NaN,undefined) parsing transform attribute. 2. If there is more than one element on the canvas, it will move them all and not just the element that was clicked on. Any help would be appreciated.

$(".svg-canvas").on("click",".selectable",function() {
    var el = $(this).attr("id");
    keymove(el);                
});

function keymove(el) {
$(document).keydown(function(e){
    e.preventDefault(); 
    if(e.keyCode == 39) {//right            
        console.log('right');
        var xforms = $("#" + el).attr("transform");
        var parts  = /\((.*)\)$/.exec(xforms);
        var parts2 = parts[1].split(",");
        var x = parts2[4];
        var y = parts2[5];          
        var tx = (++x);
        $("#" + el).attr({transform:'translate('+ tx + ',' + y +')'});                      
    }else if(e.keyCode == 37) {//left
        console.log('left');
        var xforms = $("#" + el).attr("transform");
        var parts  = /\((.*)\)$/.exec(xforms);
        var parts2 = parts[1].split(",");
        var x = parts2[4];
        var y = parts2[5];
        var tx = (--x);
        $("#" + el).attr({transform:'translate('+ tx + ',' + y +')'});
    }else if(e.keyCode == 38) {//up
        console.log('up');
        var xforms = $("#" + el).attr("transform");
        var parts  = /\((.*)\)$/.exec(xforms);
        var parts2 = parts[1].split(",");
        var x = parts2[4];
        var y = parts2[5];
        var ty = (--y);
        $("#" + el).attr({transform:'translate('+ x + ',' + ty +')'});
    }else if(e.keyCode == 40) {//down
        console.log('down');
        var xforms = $("#" + el).attr("transform");
        var parts  = /\((.*)\)$/.exec(xforms);
        var parts2 = parts[1].split(",");
        var x = parts2[4];
        var y = parts2[5];
        var ty = (++y);
        $("#" + el).attr({transform:'translate('+ x + ',' + ty +')'});
    }else{
        return; 
    }               
});
}

Answer 1

Once you set the transform property to translate.. in here: $("#" + el).attr({transform:'translate('+ tx + ',' + y +')'}); , you can't get the property in matrix mode.

So when you are trying to do: var xforms = $("#" + el).attr("transform"); you get translate(236,205) so the parsing is wrong.

The solution is to set the transform values in matrix combination too, so you will can read it in the next action.