web-dev-qa-db-fra.com

Comment obtenir la largeur d'un élément svg: g

Je travaille actuellement avec un élément svg en JavaScript. Et je suis nouveau dans ce domaine.

Ma question est que j'ai un élément svg dans lequel j'ai plusieurs svg:g éléments. Et dans mon svg:g éléments J'ai plusieurs autres éléments svg.

    <svg>
     <g class="my-class">
      <g class "c1">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
      <g class="c2">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
      <g class="c3">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
    </g>
   </svg>

g s'ajoutent dynamiquement dans mon

g "ma_classe"

Maintenant, je veux définir ma svg largeur égale à la largeur de g.my_class largeur.

var svgWidth  =   $('.my-class').width()
alert(svgWidth);

Mais ça me donne zéro. Comment puis-je le voir sur mon navigateur dans une boîte à info-bulles jauneenter image description here

lorsque je sélectionne cette ligne.

Quelqu'un peut-il bien me guider? Suis-je en train de faire cela correctement, ou comment puis-je y parvenir? Merci

60
A_user

Essayez .getBoundingClientRect

$('.my-class')[0].getBoundingClientRect().width;

Démo http://jsfiddle.net/5DA45/

84
Esailija

Je recommanderais getBBox (qui fait partie de SVG 1.1) plutôt que getBoundingClientRect (qui ne l'est pas):

$('.my-class')[0].getBBox().width;

Démo http://jsfiddle.net/TAck4/

88
Erik Dahlström