1

実際の問題を参照してください: http://jsfiddle.net/krtGd/1/

div次のようなフローティングに SVG 要素が埋め込まれています。

<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スタイルが float の代わりにある場合も同じことが当てはまります。

ここで奇妙なことに、これが単純なレイアウトの問題ではなくリフローの問題であると私に確信させているのは、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 に答える