我动态地将 svg 文本元素放置在包含在 svg 组中的模板上。我需要用户具有在单击/聚焦后使用键盘箭头键单独移动每个元素的功能。我当前的下面的代码有一些问题。 1. 箭头键将移动元素一次,然后出现错误:解析转换属性时出现意外值translate(NaN,undefined)。 2. 如果 Canvas 上有多个元素,它将移动所有元素,而不仅仅是被单击的元素。任何帮助将不胜感激。
$(".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;
}
});
}
最佳答案
将 transform
属性设置为 translate..
后:$("#"+ el).attr({transform:'translate( '+ tx + ',' + y +')'});
,矩阵
模式下无法获取该属性。
因此,当您尝试执行以下操作时: var xforms = $("#"+ el).attr("transform");
您会得到 translate(236,205)
所以解析是错误的。
解决方案是在matrix
组合中设置transform
值,这样您就可以在下一步操作中读取它。
关于javascript - 使用箭头键移动 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34022705/