Question

考虑以下示例： http://jsfiddle.net/emepyc/gVNRc/

 <body>
  <ul class="nav nav-tabs">
    <li><a href="#plot" data-toggle="tab">Main</a></li>
  </ul>

  <div class="tab-content">
    <div id="plot" class="tab-pane">
    </div>
  </div>
 </body>

当“plot”div元素在bootstrap控件下时，bbox被错误地报告为： SVGRect {height：0，width：0，y：0，x：0}

但是将div元素移到外面......

 <body>
    <div id="plot">
    </div>
 </body>

... bbox被正确报告为： SVGRect {height：146，width：848，y：180，x：56}

有人知道这里发生了什么吗？

米;

Answer 1

好的，所以看起来这个对话一直在其他地方进行...... https://groups.google.com/forum/?fromgroups=#!topic/d3-js/dW_pt5vs7kE

事实上，如果svg在tab-pane div中初始化，如果选项卡窗格是第一个active选项卡窗格，则已经提到过svg将如何正确显示。

http://jsfiddle.net/SzVrs/8/

  <ul class="nav nav-tabs">
    <li class="active"><a href="#plot" data-toggle="tab">Main</a></li>
    <li><a href="#plotThickens" data-toggle="tab">Other</a></li>
  </ul>
  <div class="tab-content">
    <div id="plot" class="tab-pane active"></div>
    <div id="plotThickens" class="tab-pane">
        <div class="alert">
          <p>The plot thickens!</p>
      </div>
    </div>
  </div>

但是，如果svg元素不在第一个active标签内，该怎么办？

这是一种方法：删除svg元素，单击引导导航的href时重建它。

http://jsfiddle.net/3LhtX/10/

 $('a[data-toggle="tab"]').on('shown', function (e) {
   $('svg').remove();
   var svg = plot();
   BB(svg);
 });

twitter bootstrap选项卡和getBBox

1 个答案: