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存在一些问题。但是，我不明白这一点。我经常使用带有可见性的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;
}

SVG＆＃39; getBBox＆＃39;在jQueryUI选项卡中失败

修改

1 个答案: