javascript - SVG的宽度:g using getBBox() returns wrong number

Question

嗨，我尝试获取 <g> 的宽度元素，无论如何它总是显示 509.5 像素。

起初我以为它是真实尺寸，因为没有缩放尺寸。

但是我在 Illustrator 中打开 SVG，宽度为 700+ 像素。

我在这里做了一个JSFiddle http://jsfiddle.net/hrsetyono/v51phqww/

有什么解决办法吗？

谢谢

编辑

我在 Chrome 上尝试过，但在 Firefox 中也有相同的行为

Answer 1

509.5px 是其在用户空间(svg 文档的空间)中的实际大小。
如果您删除 viewBox 属性并使用 illustrator 重新打开它，它将为您提供 509.5px 的宽度。

现在，如果您希望获取其在窗口 (DOM) 空间中的大小，请使用 element.getBoundingClientRect() 。

$(document).ready(function() {
  var $screen = $("#screen")[0];
  var screenWidth = $screen.getBoundingClientRect().width;
  
  log("width is " + screenWidth);
  // try changing the width in CSS and the console always still shows 509.5
});

function log(data){
    $('#log').text(data);
  }

#macbook {
    width: 400px;
    height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="macbook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 669.9 387.8">
  <g>
      <line fill="none" stroke="#939598" stroke-miterlimit="10" x1="546" y1="356.5" x2="548" y2="365.6"/>
      <line fill="none" stroke="#939598" stroke-miterlimit="10" x1="122.7" y1="356.5" x2="120.5" y2="365.6"/>
      <path fill="none" stroke="#939598" stroke-width="1.5" stroke-miterlimit="10" d="M64.9,365c-0.9-2.2-1.4-4.5-1.4-7l0-337.5
                c0-10.4,8.4-18.8,18.8-18.8l505.4,0c10.4,0,18.8,8.4,18.8,18.8l0,337.5c0,2.5-0.5,5-1.4,7.2"/>
      <path fill="none" stroke="#939598" stroke-miterlimit="10" d="M586.4,356.5l-502.7,0c-16.8,0-17.1,0-17.1-17.1l0-317.3
                C66.5,12.6,74.2,5,83.7,5l502.7,0c9.5,0,17.1,7.7,17.1,17.1l0,317.3C603.5,356.5,603.5,356.5,586.4,356.5z"/>
      <g id="screen">
          <path fill="#939598" d="M588.3,24.3v320.3H81.8V24.3H588.3 M588.3,22.8H81.8c-0.8,0-1.5,0.7-1.5,1.5v320.3c0,0.8,0.7,1.5,1.5,1.5
                  h506.5c0.8,0,1.5-0.7,1.5-1.5V24.3C589.8,23.5,589.1,22.8,588.3,22.8L588.3,22.8z"/>
      </g>
      <circle fill="none" stroke="#939598" stroke-miterlimit="10" cx="335" cy="14.2" r="2.8"/>
      
      <rect x="1.6" y="365.6" fill="none" stroke="#939598" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10" width="666.7" height="11.2"/>
      <path fill="none" stroke="#939598" stroke-width="1.5" stroke-miterlimit="10" d="M668.4,376.8c0,0-10.4,9.1-41.4,9.1
                c-31,0-584.7,0-597.3,0s-28-9.1-28-9.1"/>
      <path fill="#939598" d="M440.8,383.1h-5.3c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h5.3c0.8,0,1.5,0.7,1.5,1.5v0
                C442.3,382.4,441.7,383.1,440.8,383.1z"/>
      <path fill="#939598" d="M233.5,383.1h-5.3c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h5.3c0.8,0,1.5,0.7,1.5,1.5l0,0
                C235,382.4,234.3,383.1,233.5,383.1z"/>
      <path fill="none" stroke="#939598" stroke-miterlimit="10" d="M288.5,365.6c0,0,0.5,6.9,8.7,6.9c8.2,0,69.2,0,76,0
                c8,0,8.8-6.9,8.8-6.9"/>
    </g>
</svg>
<div id="log"></div>