How to draw a trace of moving object in SVG - svg

Question

I have object in SVG that I move using keyboard.
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;
}
});
How can I add a trace (line that show the path of the moving avatar) in SVG? It need to be visible when I move my avatar. It would be nice if it can be not only a line but also a pattern.

Answer 1

I found a way, I could just put a path and add lines to it on keydown (appending it to d attribute), to simplify the path I put a line every 5 moves.
var trace;
(function() {
var start = $('#start')[0].getBBox();
var x = start.x+(start.width/2);
var y = start.y+(start.height/2);
trace = $('<path/>').attr({
id: 'trace',
stroke: '#000',
fill: 'none',
d: 'M ' + x + ' ' + y
}).appendTo(svg);
// in normal case trace path need to be added before svg is inserted to the DOM
// in my case I modify jquery library to use document.createElementNS instead of
// document.createElement
avatar.setPosition(x, y);
})();
var i = 0;
$(document).keydown(function(e) {
...
if (++i % 5 === 0) {
var avatar_size = avatar.size(); // size if jquery plugin that return width and height using BBox
var x = matrix.matrix[0][2];
var y = matrix.matrix[1][2];
trace.attr('d', trace.attr('d') + ', ' + x + ' ' + y);
}
});