La position de la souris à l'intérieur de autoscaled SVG

Je suis en train de vivre des préoccupations au sujet de la position du curseur de la souris à l'intérieur de mon document SVG. Je souhaiterais créer un potentiomètre qui suivra le curseur lorsque vous faites glisser, à l'aide de JavaScript dans une page HTML.

J'ai essayé evt.clientX/Y et evt.screenX/Y, mais comme mon SVG est dans autoscale, les coordonnées à l'intérieur de mon fichier SVG sont différents. J'ai été à la recherche d'une réponse pendant des jours maintenant, mais je ne pouvais pas trouver toute solution (que ce soit en sachant que mes SVG facteur de changement d'échelle en temps réel ou ont une fonction de souris emplacement en SVG système de coordonnées).

La rotation de suivre une règle simple:

if ( evt.screenX < xc)

ang = Math.atan( (evt.screenY - yc)/(evt.screenX - xc) )*360/(2*Math.PI) - 90;

if( evt.screenX > xc )

ang = Math.atan( (evt.screenY - yc)/(evt.screenX - xc) )*360/(2*Math.PI) + 90;

Avec (xc;yc) comme centre de rotation et le remplacement de tous les evt.screenX/Y par les coordonnées de la souris à l'intérieur de mon fichier SVG.

  • vous devez travailler avec la matrice de transformation pour obtenir les coordonnées correctes. Un jsfiddle serait utile.
InformationsquelleAutor Riwall | 2012-04-24