SVG 'getBBox' завершается неудачно на вкладке jQueryUI

Question

У меня есть автономный генератор графиков SVG, который работает со всеми основными браузерами.Однако я только что добавил код для отображения графиков на вкладке пользовательского интерфейса jQuery, и код сломался.В частности, теперь 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.

Есть идеи, что я здесь делаю неправильно?Спасибо.

[это, вероятно, та же проблема, что и Выполнение обновлений Ajax в SVG-брейках getBBox, есть ли обходной путь? , но ответов на этот вопрос не было].

EDIT

Я не упомянул, что я рендеринг в скрытую вкладку, которая отображается только после завершения диаграммы.Поиск в коде исключения 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

Любой компонент, для инициализации которого требуются некоторые размерные вычисления, не будет работать на скрытой вкладке, поскольку сама панель вкладок скрыта с помощью дисплея: ни одна, так чтолюбые элементы внутри не сообщают их фактическую ширину и высоту (0 в большинстве браузеров).

Есть простой обходной путь.Используйте технику влево, чтобы скрыть неактивные панели вкладок.Например, в вашей таблице стилей замените правило для селектора классов ".ui-tabs .ui-tabs-hide" на

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