javascript - 如何获取 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“我的班级”

现在我想设置我的svg宽度等于宽度的g.my_class宽度。

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

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

当我选择这条线时。

任何人都可以指导我吗？我做对了吗，或者我怎样才能做到这一点？谢谢

Answer 1

尝试.getBoundingClientRect

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

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

Answer 2

我建议getBBox（它是 SVG 1.1 的一部分）getBoundingClientRect而不是（不是）：

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

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