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

Question

我目前在JavaScript中使用一个svg元素。而且我是新手。

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

我动态地在我的HTML中添加了g元素。

g "my_class"

现在我想将我的svg的宽度设置为g.my_class的宽度。

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

但是它给了我零。然而，我可以在浏览器中的黄色工具提示框中看到它

当我选择这一行时。

有没有人能够指导我？ 我是否做对了，或者我如何实现这个目标？ 谢谢

- A_user

Answer 1

尝试使用.getBoundingClientRect

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

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

- Esailija

---

非常感谢@Esailija。但我想问一件事，它给了我一个宽度值，这个值等于工具提示框中宽度的值加上10。有什么想法为什么会这样？ - A_user

谢谢 @Esailija，这个方法有效。是的，我更喜欢使用 getBoundingClientRect() 而不是 getBBox()。原因是当我需要“g”元素的宽度时，我需要根据 SVG 测量获得实际宽度。而 getBBox() 给出的是基于 Viewbox 大小的宽度，而不管 SVG 的大小如何。即使我将 SVG 调整为 12px（视图框大小为“0 0 409.215 550.197”），getBBox() 仍然给出4.09.215，而我需要的是SVG的原始大小，应该是“8.920745849609375”。因此，getBBox 不是获取 SVG 中 g 元素大小的真正有用函数。 - Deepak Oberoi

所以，要获取高度，请使用$（'.my-class'）[0] .getBoundingClientRect()。height; - hossein naghneh

Answer 2

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

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

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

- Erik Dahlström

---

你为什么会推荐它？ - Yarin

因为getBBox是SVG规范的必要部分，而getBoundingClientRect不是。 - Erik Dahlström

@Yarin - 还要注意的是，只有 getBBox 可以获取 SVG 内左上角的正确坐标 (-20,-10)：http://jsfiddle.net/QGN6c/20/ - Sphinxxx

注意，getBBox 返回的值是 SVG 坐标系下的，而 getBoundingClientRect 返回的是渲染后的坐标系下的值。在使用 viewBox 而不是宽度和高度的 SVG 中，返回的值可能会有所不同。 - geoffliu

getBBox在变换（平移）之前提供坐标。 - Dee