我在 SVG 中有使用键盘移动的对象。
var svg = $('svg');
var avatar = svg.find('#avatar');
var left, top, right, bottom;
$(document).keydown(function(e) {
var svg = avatar[0].ownerSVGElement;
var matrix = avatar[0].getCTM();
if (e.which === 37 || left) { //left
matrix.translate(-1, 0);
e.preventDefault();
left = true;
}
if (e.which === 38 || top) { // top
matrix.translate(0, -1);
e.preventDefault();
top = true;
}
if (e.which === 39 || right) { // right
matrix.translate(1, 0);
e.preventDefault();
right = true;
}
if (e.which === 40 || bottom) { // bottom
matrix.translate(0, 1);
e.preventDefault();
bottom = true;
}
avatar.attr('transform', matrix.asString());
}).keyup(function(e) {
if (e.which === 37) {
left = false;
} else if (e.which === 38) {
top = false;
} else if (e.which === 39) {
right = false;
} else if (e.which === 40) {
bottom = false;
}
});
如何在 SVG 中添加轨迹(显示移动头像的路径的线)?当我移动我的头像时,它需要可见。如果它不仅可以是一条线,而且可以是一个图案,那就太好了。