web-dev-qa-db-fra.com

Récupère le cadre de sélection du chemin SVG à l'aide de jQuery

Je veux obtenir le getBBox () pour le chemin svg dans jQuery. j'ai essayé comme ça

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

J'ai ajouté le chemin d'accès à un élément SVG. J'ai essayé un autre élément dans SVG, par exemple un nœud de texte dans ce cas, il retourne la valeur d'une boîte englobante.

Comment puis-je calculer le cadre de sélection pour un chemin en SVG?

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>
svgjquery-svg
12
SivaRajini

getBBox est une méthode SVG native et ne fait pas partie de jquery, vous devez donc écrire

$("#"+ path id)[0].getBBox()

Exemple

Si vous obtenez une valeur non nulle pour l'exemple et une valeur zéro dans votre code, il doit alors se passer autre chose que vous ne nous avez pas montré. 

Les causes les plus probables sont que le chemin est un enfant de <defs>, c’est-à-dire que vous ne l’utilisez que indirectement dans un motif ou un clipPath ou bien qu’il a un style d’affichage nul, auquel cas il ne serait pas rendu et n’aurait pas de lien boîte.

12
Robert Longson

L'implémentation native getBBox() dans Webkit est boguée, vous pouvez trouver le traqueur bogue ici. En fait, c'est corrigé maintenant

Une solution consiste à utiliser une bibliothèque SVG dotée de ses propres algorithmes pour calculer ce type de problème. L'un d'entre eux est Raphael.js .

Vous pouvez utiliser Raphael} _ element.getBBox() , qui fait la même chose que la fonction native getBBox().

10
Nik Kyriakides

Moi aussi j'ai du mal à faire en sorte que la syntaxe JQuery fonctionne pour moi. Ceci a renvoyé Uncaught TypeError: Object [objet Object] n'a pas de méthode 'getBBox' :

console.log($("#testtext").getBBox().width);

... parce que j'avais omis l'index du tableau (merci @Christian Vielma, ci-dessous)!

Cependant, le Javascript standard fonctionnait pour moi et j'ai pu afficher la largeur de RECT (dans mon cas) dans la console Chrome:

console.log(document.getElementById("testtext").getBBox().width);

Donc, vous pourriez essayer cela à la place.

6
MSC

Essayez Element.getBoundingClientRect (). Cela vient du DOM html, mais fonctionne pour moi sur les éléments SVG (sans beaucoup de transformation).

0
OsamaBinLogin