Obtenir le Pixel de l'Écran, les coordonnées d'un élément Rect

Je suis en train d'essayer d'obtenir le pixel de l'écran, les coordonnées d'un rectangle en SVG via java script.
Lorsque le rectangle a été cliqué, je peux comprendre sa largeur, la hauteur, la position x et y avec getBBox().

Mais ces positions sont des positions d'origine. Je veux que la position de l'écran.

Par exemple si je manipule les négatoscopes de l'ensemble du SVG, ces getBBox coordonnées ne sont plus les mêmes que les pixels de l'écran. Est-il une fonction ou un moyen pour obtenir le
coordonne, au vu de la viewBox et la taille des pixels de l'élément svg?

OriginalL'auteur Matthias | 2011-04-29

  1. 30

    Démo: http://phrogz.net/SVG/screen_location_for_element.xhtml

    var svg = document.querySelector('svg');
var pt  = svg.createSVGPoint();
function screenCoordsForRect(rect){
  var corners = {};
  var matrix  = rect.getScreenCTM();
  pt.x = rect.x.animVal.value;
  pt.y = rect.y.animVal.value;
  corners.nw = pt.matrixTransform(matrix);
  pt.x += rect.width.animVal.value;
  corners.ne = pt.matrixTransform(matrix);
  pt.y += rect.height.animVal.value;
  corners.se = pt.matrixTransform(matrix);
  pt.x -= rect.width.animVal.value;
  corners.sw = pt.matrixTransform(matrix);
  return corners;
}

    Le magenta carrés sont absolument placé divs dans l'élément HTML, à l'aide de l'écran de coordonnées de l'espace. Lorsque vous déplacez ou redimensionnez les rectangles cette fonction est appelée et déplace le coin divs au cours des quatre coins (lignes 116-126). Notez que cela fonctionne même lorsque les rectangles sont arbitraires imbriquée de transformation (par exemple, le rectangle bleu) et le SVG est mis à l'échelle (redimensionner la fenêtre de votre navigateur).

    Pour le plaisir, faites glisser l'un des rectangles sur le bord de la SVG, canvas et avis de l'écran-espace coins de rester sur l'invisible points.

    Super réponse! Simple et au point. Je serais heureux de les ajouter plus de points si je le pouvais, qui est beaucoup plus utile qu'il est.
    Désolé de porter cette question à la vie, mais je suis en train d'essayer d'obtenir à l'écran des coordonnées d'un élément svg et était curieux de savoir si X/Y de coordonnées peut être obtenu à partir de l'exemple ci-dessus
    C'est ce que la mesure de code vous donne. Un objet JavaScript avec quatre propriétés, dont chacun est un SVG Point avec des coordonnées x,y.
    Merci pour la réponse. Les coordonnées ne sont pas par rapport à la svg droit? Juste coordonnées de l'écran? Ma question était orientée vers l'obtention d'un seul point(le milieu) pour le rectangle connaissant son coin coordonnées. Un rapide calcul est de le faire en utilisant le nw et se coordonner points. Que devient le moyen de coordonner. Merci pour la réponse, encore et merci de poster cette réponse

    OriginalL'auteur Phrogz

  2. 4

    Vous pouvez également vérifier l'existence de la elm.getScreenBBox() méthode, qui fait quoi cela ressemble. Il est défini dans SVG Tiny 1.2.

    Voir les fichiers ici, qui comprennent un repli de la mise en œuvre de getScreenBBox qui devrait fonctionner dans tous les navigateurs.

    Merci Erik pour ce complément d'une solution
    Blog lien ne fonctionne plus - "Mon Opéra" est fermé.
    merci, mis à jour le lien.

    OriginalL'auteur Erik Dahlström