如何获得g元素的宽度？答案

【问题标题】：How to get width of g element?如何获得g元素的宽度？
【发布时间】：2016-12-10 10:15:18
【问题描述】：

我在使用 jQuery 获取 <g></g> 元素的宽度时遇到了一些问题。使用 .innerWidth() 或 width() 返回 null。是否可以使用 jquery 获得<g></g> 宽度？

我问这个是因为 Chrome 和 IE 之间的渲染差异。在 chrome 中我只是使用：

var box = svg.node().getBBox();
var width = box.width;

但在 IE 中它不起作用 - 它返回 0 的宽度。

【问题讨论】：

jQuery 不支持 svgs，svgs 的行为很难预测，尤其是跨浏览器。也许寻找一个 svg 特定的库。
也许this question 可以提供帮助。

标签： jquery html svg

【解决方案1】：

将 ID 添加到元素也许可以工作

 <svg viewBox="0 0 95 50"
             xmlns="http://www.w3.org/2000/svg">
           <g stroke="green" fill="white" stroke-width="5" id="myGroup">
             <circle cx="25" cy="25" r="15"/>
             <circle cx="40" cy="25" r="15"/>
             <circle cx="55" cy="25" r="15"/>
             <circle cx="70" cy="25" r="15"/>
           </g>
        </svg>
        <script>
        $(document).ready(function(){
          var height =  document.getElementById("myGroup").getBBox().height;
          var width =  document.getElementById("myGroup").getBBox().width;
          alert(" width "+width+" height "+height);
        });
        </script>

【讨论】：