Coordenar a transformação em SVG dentro do Firefox com barras de rolagem

Question

Estou tentando calcular as coordenadas corretas do mouse, no espaço de coordenadas do usuário, em um documento SVG do código JavaScript quando as barras de rolagem surgirem quando esse arquivo SVG é visualizado de dentro do Firefox. Mas não está bem correto. Isso é necessário para desenhar corretamente as dicas de ferramentas baseadas em SVG, mesmo quando o SVG é rolado horizontalmente ou verticalmente.

Desejo que as transformações de coordenadas estejam corretas entre os navegadores do IE e do Firefox. Além disso, quero fazer isso com uma solução JavaScript+SVG de fonte única que, esperançosamente, não exija código condicional específico do navegador. Atualmente, estou usando o Firefox 3.5.10, mas consideraria atualizar para uma versão mais recente do Firefox e ainda não testei o IE.

O problema que encontrei são as compensações de coordenadas para as barras de rolagem: a transformação de coordenadas do mouse não é suficiente quando as barras de rolagem surgem sobre o elemento SVG dentro do Firefox. Como um auxílio de depuração para descobrir as transformações de coordenadas, estou trabalhando com um arquivo SVG simples que contém manipuladores JavaScript, tudo em um arquivo, que simplesmente desenha mira no cursor do mouse como objetos de linha SVG. Encontre -o postado em svg_cross_hairs.svg. Se você carregar esse arquivo no Firefox e reduzir a janela do Firefox até que as barras de rolagem apareçam e role as barras de rolagem vertical ou horizontal, você descobrirá que a mira desenhada pelo JavaScript será compensada pela quantidade de quantidade horizontal ou vertical,, que não está correto para desenhar um objeto de dica de ferramenta dentro ou perto de onde o cursor do mouse realmente está.

Eu vejo o Firefox: Obtenha coordenadas do mouse de canto superior à esquerda da viewport Pergunta que fala sobre o scrolltop propriedade.

MSG#00056 esclarece que há confusão dos significados de element.{pageX,pageY,clientX,clientY} atributos e o element.getscreenCTM método.

Existe uma maneira mais limpa de chegar à coordenada correta do mouse, no sistema de coordenadas do usuário?

Answer 1

Você pode usar evt.pageX / evt.pageY ou window.pageXOffset / window.pageYOffset Para chegar a algo que funciona mesmo que o SVG seja rolado.