Firefox svg rendering: как получить реальную позицию g?

Question

У меня есть страница с svg, загружаемая через объект.

Затем я вызвать функцию, которая загружает DIV, используя ширину, высоту, левую и верхнюю часть внутреннего элемента г

var cartina = document.getElementById(whatMap); 
     var cartinaContext;   
     cartina.addEventListener("load",function(){ 
     cartinaContext = cartina.contentDocument; 
     var el = $("#mappaBase", cartinaContext)[0]; 
     var rect = el.getBoundingClientRect(); 
     var whatContainer = "#containerIcone"+whatMap; 
     $(whatContainer).css("position", "absolute"); 
     $(whatContainer).width(rect.width); 
     $(whatContainer).height(rect.height); 
     $(whatContainer).css("left", rect.left); 
     $(whatContainer).css("top", rect.top); 
} 

Я использую getBoundingClientRect(). Я применяю div #containerIcone через svg. В Chrome он работает нормально. Проблема в Firefox: когда я загружаю страницу, ширина и высота правильно загружаются, но слева и сверху нет. Если я проверю svg с Firefox, то окажется, что элемент g помещен в фиксированное положение, а элемент , оказанный g, имеет еще один (в зависимости от размеров окна и позиции других элементов). Тем не менее, фиксированный элемент g хорошо реагирует на окно различных размеров. Разделение расположено над фиксированным контрольным положением g-элемента.

Осмотр одного и того же элемента с помощью Chrome показывает, что блок проверки элемента g каждый раз вырисовывается, когда отображается g-элемент.

Как я могу сделать эту работу в Firefox?

Answer 1

Я нашел решение, оно работает в кросс-браузере. Вместо того, чтобы позиционирование с .TOP и .left вложенного элемента г, получаю ширину и высоту вложенного элемента

var el = $(nestedElement); 
var rect = el.getBoundingClientRect(); 

Тогда я получаю ширину и высоту родительского элемента SVG

var rectSvg = mysvg.getBoundingClientRect(); 

Тогда Я вычитаю el ширину и высоту из svg единиц и разделите результаты на 2. Конечный результат - это пустое пространство, в котором находится svg, сверху и слева, используется для центрирования визуализированного элемента el внутри svg элемент (используемый отношением стороннего браузера к мантену). Затем я применяю эти результаты как css вверху и слева от моего div, содержащего значки - он будет располагаться точно над элементом g el.

var leftSpace = (rectSvg.width - rect.width)/2; 
var topSpace = (rectSvg.height - rect.height)/2; 
$(myPositionedDiv).css("left", leftSpace); 
$(myPositionedDiv).css("top", topSpace); 

Этот способ, однако, Firefox позиционирует элемент, несмотря на то, что рендеринг, слева и сверху правильно рассчитаны.