谷歌浏览器上的Bootstrap导航栏“闪烁”

Question

我目前正在为我的网站使用固定的顶部导航栏，但我有一点设计问题。

当页面加载谷歌浏览器时，我的导航栏的高度在很短的时间内高于预期，然后它正常大小。

我在这个导航栏上有一个svg对象，显然这个错误发生在svg正在加载但它只发生在谷歌浏览器上，我没有Opera，IE或Firefox的问题。

以下是目前正在发生的一些屏幕。

在加载过程中：

http://uppix.net/7vCKxC.jpg

加载后：

：http://uppix.net/VwI9lT.jpg

提前谢谢大家！

编辑：这是我的标题的一些代码，我只是将svg嵌入其中，因为如果我把它关掉，问题就不会出现了。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Start of the nav bar content -->
  <div class="collapse navbar-collapse">

    <embed onload="SVG()" id="exp" src="./img/xp_bar/xb_bar_final.svg" width="300" />               
  </div>
</div>

和SVG（）函数：

function SVG()
{
var path=document.getElementById("exp")
      .getSVGDocument()
      .getElementById("linearGradient5228");
      path.setAttribute('x2',document.getElementById("expratio").value*491);
}

EDIT2：在嵌入中添加height属性会导致导航栏“闪烁”，但SVG在加载过程中仍然只在Google Chrome上闪烁。