SVG 'getBBox' 在 jQueryUI 选项卡中失败

Question

我有一个独立的 SVG 图表生成器，适用于所有主要浏览器。但是，我刚刚添加了用于在 jQuery UI 选项卡中显示图表的代码，但代码已损坏。具体来说，'getBBox' 现在通常会失败。它在 FF 中引发异常，在 Opera 中按预期工作，并在 Chrome 和 Safari 中给出错误答案。

我认为，新旧代码之间的区别仅在于我对选项卡内“文档”的理解。在旧的独立代码中，我可以显示一个矩形并按如下方式获取它的 bbox（在所有浏览器中）：

var svgDocument;
var svgNS = "http://www.w3.org/2000/svg";
...
if(window.svgDocument == null)
   svgDocument = evt.target.ownerDocument;
...
var lbox = svgDocument.createElementNS(svgNS, "rect");
lbox.setAttributeNS(null, "x",                50);
lbox.setAttributeNS(null, "y",                50);
lbox.setAttributeNS(null, "width",            40);
lbox.setAttributeNS(null, "height",           40);
lbox.setAttributeNS(null, "stroke",           "#E810D6");
lbox.setAttributeNS(null, "stroke-width",     2);
lbox.setAttributeNS(null, "fill-opacity",     1);
lbox.setAttributeNS(null, "stroke-opacity",   1);
lbox.setAttributeNS(null, "stroke-dasharray", 0);
svgDocument.documentElement.appendChild(lbox);     // displays the box
var bbox = lbox.getBBox();                         // gets the box bounds

问题是，当我尝试在选项卡内显示时，svgDocument应该是什么并不明显。这是我当前的代码：

var svgDocument = document;
var svgNS       = "http://www.w3.org/2000/svg";
var svgRoot;
...
// handle jQuery UI tabs as follows:
var top, svg, chart;
top   = $(ui.panel).get(0);
svg   = svgDocument.createElementNS(svgNS, "svg");
chart = "chart" + "-" + ui.panel.id;
svg.setAttributeNS(null, "id", chart);
top.appendChild(svg);
svgRoot = svgDocument.getElementById(chart);
...
// SVG draw is identical, except that svgDocument.documentElement is now svgRoot:
var lbox = svgDocument.createElementNS(svgNS, "rect");
lbox.setAttributeNS(null, "x",                50);
lbox.setAttributeNS(null, "y",                50);
lbox.setAttributeNS(null, "width",            40);
lbox.setAttributeNS(null, "height",           40);
lbox.setAttributeNS(null, "stroke",           "#E810D6");
lbox.setAttributeNS(null, "stroke-width",     2);
lbox.setAttributeNS(null, "fill-opacity",     1);
lbox.setAttributeNS(null, "stroke-opacity",   1);
lbox.setAttributeNS(null, "stroke-dasharray", 0);
svgRoot.appendChild(lbox);
var bbox = lbox.getBBox();

新代码在 Opera 中“正确”运行。FF、Chrome 和 Safari 在新选项卡中正确显示矩形，但 bbox 计算错误。

知道我在这里做错了什么吗？谢谢。

[这可能与在 SVG 中执行 Ajax 更新破坏 getBBox 相同，有解决方法吗？，但对此没有答案]。

编辑

我没有提到我正在渲染到一个隐藏的选项卡中，该选项卡仅在图表完成时显示。谷歌搜索 FF 异常代码（在下面的评论中）表明当元素未显示时 getBBox 存在一些问题。但是，我不明白这一点。我经常在所有浏览器上使用带有可见性的 getBBox:hidden 来调整复杂元素的大小，然后在所有浏览器上显示它们（当我不使用选项卡时）。此外，示例中的矩形确实渲染了，因为我可以在选项卡可见时看到它，所以 getBBox 不应该也可以工作吗？

Answer 1

已修复 - 答案实际上在选项卡文档中。哎呀。

来自http://docs.jquery.com/UI/Tabs#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_​​.28inactive.29_tab.3F

任何需要一些维度计算来初始化的组件都不能在隐藏选项卡中工作，因为选项卡面板本身是通过 display: none 隐藏的，所以里面的任何元素都不会报告它们的实际宽度和高度（在大多数浏览器中为 0） .

有一个简单的解决方法。使用 off-left 技术隐藏非活动选项卡面板。例如，在您的样式表中，将类选择器“.ui-tabs .ui-tabs-hide”的规则替换为

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}