70

現在svg、JavaScript の要素を使用しています。そして、私はこれが初めてです。

私の質問は、svg複数のsvg:g要素を持つ要素があるということです。私の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私の中に動的に追加されています

g "my_class"

svgここで、幅を幅の幅に等しく設定したいと思いg.my_classます。

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

しかし、それは私にゼロを与えます。ブラウザの黄色のツール ヒント ボックスでどのように表示されるかここに画像の説明を入力

この行を選択すると。

誰か親切に案内してもらえますか？私はこれを正しく行っていますか、またはどうすればこれを達成できますか? ありがとう

4

2 に答える 2

101

試す.getBoundingClientRect

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

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

于 2012-07-28T17:09:11.220 に答える
92

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

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

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

于 2012-08-08T15:15:17.657 に答える