SVG'getBBox'在jQueryUI选项卡中失败 [英] SVG 'getBBox' fails in a jQueryUI tab

问题描述

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

I have a stand-alone SVG chart generator that works with all the major browsers. However, I've just added code to display the charts inside a jQuery UI tab, and the code has broken. Specifically, 'getBBox' now generally fails. It throws an exception in FF, works as expected in Opera, and gives the wrong answer in Chrome and Safari.

我认为，旧代码和新代码之间的区别仅在于我了解标签内的文档"是什么.在旧的独立代码中，我可以显示一个矩形，并在所有浏览器中按如下方式获取它的bbox:

The difference between the old and new code is only, I think, in my understanding of what a 'document' is inside a tab. In the old stand-alone code, I could display a rectangle and get it's bbox as follows (in all browsers):

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应该是什么并不明显.这是我当前的代码:

The problem is that, when I try to display inside a tab, it's not obvious what svgDocument should be. This is my current code:

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.

The new code works "correctly" in Opera. FF, Chrome, and Safari display the rectangle correctly in the new tab, but get the bbox calculation wrong.

知道我在做什么错吗?谢谢.

Any idea what I'm doing wrong here? Thanks.

[这可能是与在SVG中执行Ajax更新会破坏getBBox，是否有解决方法?，但对此没有任何答案.

[this is probably the same issue as Doing Ajax updates in SVG breaks getBBox, is there a workaround?, but there were no answers on that].

我没有提到我正在渲染到一个隐藏的选项卡，该选项卡仅在图表完成时显示.搜寻FF异常代码(在下面的注释中)表明，当不显示该元素时，getBBox会出现问题.但是，我不明白这一点.我通常在所有浏览器上都使用具有可见性的getBBox:在显示复杂元素之前将其隐藏，然后在所有浏览器上隐藏它们的大小(当我不使用选项卡时).此外，示例中的矩形实际上可以渲染，正如我在标签可见时所看到的那样，因此getBBox也不应该也可以工作吗?

I failed to mention that I'm rendering into a hidden tab, which is only displayed when the chart completes. Googling the FF exception code (in the comment below) indicates that there's some issue with getBBox when the element is not displayed. However, I don't understand this. I routinely use getBBox with visibility:hidden to size complex elements before displaying them, on all browsers (when I'm not using tabs). Besides, the rectangle in the example does actually render, as I can see it when the tab becomes visible, so shouldn't getBBox should also work?

推荐答案

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

Fixed - the answer is actually in the tabs documentation. Whoops.

来自 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

任何需要进行尺寸计算以进行初始化的组件都不会在隐藏的选项卡中工作，因为选项卡面板本身是通过显示隐藏的:无，因此其中的任何元素都不会报告其实际宽度和高度(0英寸大多数浏览器).

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

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

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

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

这篇关于SVG'getBBox'在jQueryUI选项卡中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！