1

查看实际问题：http: //jsfiddle.net/krtGd/1/

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

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

这很好用；在divSVG 周围符合预期。但是，当我使用 JavaScript 调整 SVG 的大小时，如下所示：

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

... SVG 正确调整大小，但它周围的框没有。正如您在 jsFiddle 中看到的那样，如果包含div具有display:inline-block而不是浮动样式，则同样的情况也是如此。

这里奇怪的是，让我相信这是一个回流问题而不是一个简单的布局问题的是，如果您检查 Chrome 控制台元素面板中的任何一个问题元素，这些div元素都会正确调整大小。此问题可能仅适用于 Google Chrome - 我在Chrome OSX v.20.0.1132.57中看到它，但在 Safari 中没有。我没有在 FF 或 IE 中测试过。

那么：如何在 Chrome 中强制重排？

我已经尝试了通常的嫌疑人，包括检查div.offsetHeight,svg.getBBox()和其他几个变体。

4

1 回答 1

3

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

于 2012-07-24T22:11:39.530 回答