在Chrome中强制重新调整DOM容器的重新调整大小的SVG元素

Question

查看操作中的问题：http://jsfiddle.net/krtGd/1/

我在浮动div中有一个嵌入式SVG元素，如下所示：

<div style="float: left;">
    <svg width="50" height="20" id="svg1">           
    </svg>
</div>

这很好用; div符合预期的SVG。但是，当我使用JavaScript调整SVG大小时，就像这样：

$('#svg2').attr('width', 50);

... SVG正确调整大小，但它周围的框没有。正如您在jsFiddle中看到的那样，如果包含div的{​​{1}}而不是浮点样式，则同样如此。

这里奇怪的是，让我觉得这是一个回流问题，而不是一个简单的布局问题，如果你检查Chrome控制台元素面板中的任何一个问题元素，display:inline-block元素正确调整大小。此问题可能仅适用于谷歌浏览器 - 我在 Chrome OSX v.20.0.1132.57 中看到它，但在Safari中没有。我还没有在FF或IE中测试过。

所以：如何在Chrome中强制重排？

我尝试过常见的嫌疑人，包括检查div，div.offsetHeight和其他几种变体。

Answer 1

听起来像是Chromium中的一个错误。当svg元素的固有宽度/高度发生变化时，布局宽度/高度不会自动更改。您可以手动设置布局宽度/高度：.css("width", "50px")。您是否考虑过使用Chromium提交错误？