jquery-ui - 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 计算错误。

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

[这可能与 Doing Ajax updates in SVG breaks getBBox, is there a workaround? 是同一问题，但没有答案]。

编辑

我没有提到我正在渲染到一个隐藏选项卡中，该选项卡仅在图表完成时显示。谷歌搜索 FF 异常代码(在下面的评论中)表明当元素未显示时 getBBox 存在一些问题。但是，我不明白这一点。我通常在所有浏览器上使用带有visibility:hidden的getBBox来调整复杂元素的大小，然后再显示它们(当我不使用选项卡时)。此外，示例中的矩形确实会渲染，正如我在选项卡可见时看到的那样，所以 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 in大多数浏览器)。

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

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