Позиционирование элементов SVG через .getBoundingClientRect() в переменной ширине div

Question

У меня есть немного неприятная проблема.

Я пытаюсь расположить кучу элементов окружности SVG в соответствии с существующим набором текстовых элементов SVG, которые имеют сходные свойства.

Элементы окружности создаются в отдельном процессе, чем текстовые элементы, поэтому позиционирование новых элементов осуществляется с использованием тех же самых преобразований и т. Д., Поскольку старый не является жизнеспособным вариантом.

Я пытаюсь использовать .getBoundingClientRect(), чтобы получить позиции, поскольку текстовые элементы преобразуются в позицию (так что .getBBox() не является опцией), а не позиционируется по атрибутам x и y.

С .getBoundingClientRect(), я могу получить правильный размер/расположение новых элементов, но так как ширина SVG-содержащего div является переменной, всегда есть немного странное смещение, которое я не могу учитывать.

Я создал упрощенный пример моей проблемы here. Измените размер и обновите страницу, чтобы увидеть проблему в действии.

Код, который я использую для размещения элементов окружности, реплицируется ниже.

var circs = theSvg.selectAll("circle") 
    .data(theCircles) 
    .enter() 
    .append("circle") 
    .attr("r", 15) 
    .attr("fill", "#f00") 
    .style("opacity", 0.3) 
    .attr("transform", function(d){ 

     var sizeDif = 800/(d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["width"]); 

     var theNum = parseInt(d.split("&")[1]); 
     var thePosition = theSvg.selectAll("text").filter(function(e){ 
     return e == theNum;})[0]; 
     var theCoords = thePosition[0].getBoundingClientRect(); 

     var leftOffset = d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["left"]; 
     var leftOffset2 = d3.select(".svgTest")[0][0].getBoundingClientRect()["left"]; 
     var bottomOffset = d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["top"]; 
     var bottomOffset2 = d3.select(".svgTest")[0][0].getBoundingClientRect()["top"]; 

     return 
     "translate(" + ((theCoords["left"] - leftOffset - leftOffset2) 
     * sizeDif) + "," + ((theCoords["top"] - bottomOffset - bottomOffset2) 
     * sizeDif) + ")"; 
}) 

EDIT:

Это очень задерживается обновление только отметить, что в то время как я не смог ответить на мой вопрос, как уже говорилось, я был в состоянии сделать работоспособную решение, основанное на предложении Павла Лебо к экстракту преобразуется из целевого элемента.

В моем случае мне пришлось использовать ряд последовательных преобразований, а не комбинацию преобразования и изменения положения x/y (из-за некоторых реалий проекта, не представленных в связанном примере). Но я рад, что нашел ответ!

Answer 1

Ваш пример отлично подходит для меня в Chrome. Но на самом деле это только потому, что SVG - единственное, что есть на странице. Если я добавлю текст над SVG, все пойдет не так.

https://jsfiddle.net/rrpfmm6d/1/

Является ли это проблемой вы говорите?

Если это так, причина в том, что вы делаете неправильный выбор при использовании getBoundingClientRect(). Он обеспечивает координаты в пространстве экрана. Это начало - верхний левый угол окна (или iframe в случае jsfiddle).

Вы должны использовать getBBox(). Возвращаемые значения находятся в том же координатном пространстве, что и элементы SVG. Это начало (обычно) в левом верхнем углу SVG.

Таким образом, используя координаты, возвращаемые по телефону getBBox(), на ваш <text> элемент для расчета местоположения для вашего круга. Если круги вставляются в тот же SVG, что и текст, не нужно будет корректировать смещения div или svg.