Estou experimentando desenhar coisas dinamicamente em um elemento SVG com base na posição do mouse. Infelizmente, estou tendo dificuldade em traduzir as coordenadas do mouse do evento mousemove no espaço de coordenadas do elemento SVG.

Aqui está uma função de buggy que venho testando:

CylinderDemo.prototype.handleMouseMove = function(evt)
{
    debugEvent = evt;

    var bcr = evt.target.getBoundingClientRect();
    var x2 = evt.clientX - bcr.left;
    var y2 = evt.clientY - bcr.top;

    console.log(evt.target);
    //console.log(evt.clientY+" - "+evt.target.getBBox());

    var d = this.pathForCylinder(this.x0, this.y0, x2, y2, 30);
    this.cap.setAttributeNS(null, "d", d);
}

canvas.onmousemove = function(evt) {
self.handleMouseMove(evt);
}

O problema é que (pelo menos no Firefox) getBoundingClientRect () não me fornece os limites do objeto SVG. Isso me dá os limites dos objetos desenháveis dentro do objeto SVG. Torna-se dolorosamente óbvio quando você passa o mouse sobre as linhas de log no firebug e destaca o sub-retângulo insignificante de elementos desenháveis. Isso significa que minha transformação das coordenadas fornece resultados defeituosos.

Que técnica devo usar para transformar o sistema de coordenadas do evento no sistema de coordenadas do contêiner SVG?

Acabei de me juntarhttp://jsfiddle.net/7kvkq/ para ilustrar o problema.