如何获得svg:g元素的宽度

Question

我目前正在使用svgJavaScript中的元素.我是新手.

我的问题是我有一个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);

但它给我零.我怎么能在黄色工具提示框中的浏览器上看到它

当我选择这一行.

有人可以指导我吗？我这样做是对的,还是我能做到这一点？谢谢

Answer 1

我建议getBBox(这是SVG 1.1的一部分)getBoundingClientRect(不是):

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

演示http://jsfiddle.net/TAck4/

Answer 2

尝试 .getBoundingClientRect

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

演示http://jsfiddle.net/5DA45/