web-dev-qa-db-ja.com

svg：g要素の幅を取得する方法

現在、JavaScriptでsvg要素を使用しています。そして、私はこれに新しいです。

私の質問は、複数のsvg:g要素があるsvg要素があることです。そして、私のsvg:g要素には、他のさまざまな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はmyに動的に追加されます

g "my_class"

ここで、svg widthをg.my_class widthの幅に設定します。

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

しかし、それは私にゼロを与えます。ブラウザーの黄色のツールヒントボックスに表示されるまでenter image description here

この行を選択すると。

誰でも親切に私を導くことができますか？私はこれを正しくやっていますか、またはどのようにこれを達成できますか？ありがとう

javascriptjquerysvgwidth
60
A_user

.getBoundingClientRect

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

デモ http://jsfiddle.net/5DA45/

84
Esailija

getBBox（そうではない）よりもgetBoundingClientRect（SVG 1.1の一部）をお勧めします。

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

デモ http://jsfiddle.net/TAck4/

88
Erik Dahlström