Obtenir la boîte de délimitation d'un élément SVG sélectionné

Question

Je veux lire :

• width , height , x , y mesures

pour un élément SVG particulier.

---

Je suppose que la façon la plus simple de procéder est de récupérer le fichier boîte de délimitation minimale et lisez ses propriétés.

Comment puis-je y accéder ?

Answer 1

Si vous avez une référence au nœud du DOM, utilisez

svgNode.getBoundingClientRect()

https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

Edition : SVG Edit a une méthode pour renvoyer les éléments actuellement sélectionnés :

svgCanvas.getSelectedElems()

donc dans l'exemple ci-dessus :

svgNode = svgCanvas.getSelectedElems()[0];
svgNode.getBoundingClientRect();

Answer 2

Voir http://granite.sru.edu/~ddailey/svg/BBox0M.svg pour l'exemple et la réponse.

En bref, ce code fonctionne pour moi dans Chrome :

<script>
function foo(evt)
{
    console.log(evt.target.getBBox());      
}
</script>

<svg>
    <circle onclick="foo(evt)" r="20%" cx="50%" cy="50%"/>
</svg>

Answer 3

En supposant que vous ayez un accès à l'élément, je pense que cela fonctionnera, non ?

box = svgedit.utilities.getBBox(selected);

Answer 4

Je ne suis pas sûr de bien comprendre, mais si vous souhaitez obtenir la hauteur ou la largeur d'un élément jQuery, utilisez width() et height() :

log("The svg is " + $("img").width() + "px wide.");
log("The svg is " + $("img").height() + "px tall.");

Exemple de JSFiddle : http://jsfiddle.net/gGWU4/