使用箭頭鍵移動SVG元素

Question

我正在將svg文本元素動態地放在svg組中包裝的模板上。 我需要用戶具有單擊/聚焦后分別使用鍵盤箭頭鍵移動每個元素的功能。 我下面的當前代碼有問題。 1.箭頭鍵將元素移動一次，然后出現錯誤：意外的值translate（NaN，undefined）解析轉換屬性。 2.如果畫布上有多個元素，它將全部移動它們，而不僅僅是被單擊的元素。 任何幫助，將不勝感激。

$(".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

一旦將transform屬性設置為translate..在這里： $("#" + el).attr({transform:'translate('+ tx + ',' + y +')'}); ，則無法以matrix模式獲取該屬性。

因此，當您嘗試執行以下操作時： var xforms = $("#" + el).attr("transform"); 您得到了translate(236,205)所以解析是錯誤的。

解決方案是也以matrix組合設置transform值，因此您可以在下一個動作中讀取它。