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

问题描述

我目前正在使用JavaScript中的 svg 元素。我是新手。

I am currently working with an svg element in JavaScript. And I am new to this.

我的问题是我有一个 svg 元素，其中我有多个 svg：g 元素。在我的 svg：g 元素中，我有各种其他svg元素。

My question is that I have an svg element in which I have multiple svg:g elements. And in my svg:g elements I have various other svg elements.

    <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 动态附加在我的

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

Now I want to set my svg width equal to the width of g.my_class width.

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

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

But its giving me zero. How ever I can see it on my browser in a yellow tool tip box

当我选择这一行时。

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

Can anyone kindly guide me? Am I doing this right, or how can I achieve this?Thanks

推荐答案

尝试 .getBoundingClientRect

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

演示

这篇关于如何获得svg：g元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！