Obtenir la dimension d'un chemin dans SVG

Je dois avoir la dimension sur l'écran d'un <chemin> dans un SVG à partir de JavaScript.

Je n'ai pas de "transformation" ou de "mise à l'échelle" (transformation, échelle) sur mon SVG. La seule chose modifiée est la viewBox, qui changera la taille de tous les éléments du SVG.

J'ai utilisé myPath.getBBox (), la largeur renvoyée reste la même même si j'ai changé mon viewBox.

Je me demande donc quelle est la relation avec cette viewBox et la taille d'un chemin. Peut-être existe-t-il une fonction pour calculer la largeur?

Vous pouvez appeler la méthode getBoundingClientRect() sur votre chemin pour obtenir des dimensions. Il renverra un objet ClientRect :

 var w = myPath.getBoundingClientRect().width; var h = myPath.getBoundingClientRect().height; 

Il existe également une méthode getScreenCTM() , qui renvoie la matrice de transformation dans les pixels d'écran actuels de l'élément auquel il a été appelé. La spécification dit :

[GetScreenCTM ()] Renvoie la matrice de transformation des unités utilisateur actuelles (c.-à-d., Après l'application de l'attribut «transformer», le cas échéant) à l'avis de l'utilisateur parental d'un «pixel». […] Notez que null est renvoyé si cet élément n'est pas accroché dans l'arborescence du document.

Tout d'abord, gardez à l'esprit que ce path ne peut pas avoir une largeur. C'est un ensemble de coords. Le navigateur utilise cette information avec la méthode de dessin pour connecter les coords et créer une forme visible.

Deuxièmement, la zone de délimitation est un instantané lorsque le SVG a été rendu. C'est pourquoi vous n'obtenez pas la largeur actualisée au redimensionnement.

Une solution de contournement, je suppose, serait d'obtenir la largeur de l'élément conatiner au SVG ( div ou autre chose).

Peut-être que certaines des bibliothèques peuvent fournir une méthode d'utilité pour comprendre cela.