为 Chrome 中调整大小的 SVG 元素强制重排 DOM 容器答案

【问题标题】：Force reflow of the DOM container for a resized SVG element in Chrome为 Chrome 中调整大小的 SVG 元素强制重排 DOM 容器
【发布时间】：2012-07-22 06:16:06
【问题描述】：

查看实际问题：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 具有 display:inline-block 而不是浮动样式，则同样如此。

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

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

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

【问题讨论】：

标签： google-chrome svg reflow

【解决方案1】：

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

【讨论】：

啊！我没有意识到设置 css 样式会在属性不起作用的地方起作用。看起来很有希望！