Question

我动态地将svg文本元素放在包含在svg组中的模板上。我需要用户具有在单击/聚焦后使用键盘箭头键单独移动每个元素的功能。我目前的代码有一些问题。 1.箭头键将移动元素一次然后我得到错误：意外值转换（NaN，未定义）解析转换属性。 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

在此处translate..将$("#" + el).attr({transform:'translate('+ tx + ',' + y +')'});属性设置为matrix后，您无法以var xforms = $("#" + el).attr("transform");模式获取该属性。

因此，当您尝试执行此操作时：translate(236,205)您得到transform，因此解析错误。

解决方案是在matrix组合中设置File "/home/hg3n/django-cms/cms-env/lib/python3.4/site-packages/gunicorn/util.py", line 354, in import_app __import__(module) ImportError: No module named 'cms.wsgi' [INFO] Worker exiting (pid: 7109) [INFO] Shutting down: Master [INFO] Reason: Worker failed to boot.值，这样您就可以在下一个操作中阅读它。

使用箭头键移动SVG元素

1 个答案: