如何在SVG中绘制运动对象的轨迹

我在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中添加跟踪（显示移动化身路径的线）？当我移动我的化身时，它需要可见。如果它不仅可以是一条线，还可以是一种模式，那就太好了。

我找到了一种方法，我可以在keydown（将其附加到d属性）上放置一条路径并向其添加线，以简化每5步放置一条线的路径

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);
    }
});

var跟踪；
（功能（）{
var start=$（'#start'）[0].getBBox（）；
var x=start.x+（start.width/2）；
变量y=起始点y+（起始点高度/2）；
跟踪=$（''）.attr({
id:'跟踪'，
笔划：“#000”，
填写：'无'，
d:'M'+x+''+y
}).appendTo（svg）；
//在正常情况下，在将svg插入DOM之前需要添加跟踪路径
//在我的例子中，我修改jquery库以使用document.createElements而不是
//document.createElement
化身设置位置（x，y）；
})();
var i=0；
$（文档）.keydown（函数（e）{
...
如果（++i%5===0）{
var avatar_size=avatar.size（）；//使用BBox返回宽度和高度的jquery插件的大小
var x=矩阵。矩阵[0][2]；
var y=矩阵。矩阵[1][2]；
trace.attr（'d'，trace.attr（'d'）+'，'+x++'+y）；
}
});