Я пытаюсь найти лучший способ получить ограничивающую рамку произвольного элемента SVG в пикселях экрана, чтобы правильно наложить элемент HTML. До сих пор мой подход заключался в том, чтобы использовать .getBBox() и .getCTM() для получения ограничивающей рамки объекта и матрицы преобразования, а затем применять преобразование к точкам ограничивающей рамки, как описано в принятом ответе на этот вопрос.
// get the element
var el = $(selector)[0],
pt = $(selector).closest('svg')[0].createSVGPoint();
// get the bounding box and matrix
var bbox = el.getBBox(),
matrix = el.getScreenCTM();
pt.x = bbox.x;
pt.y = bbox.y;
var nw = pt.matrixTransform(matrix);
pt.x += bbox.width;
pt.y += bbox.height;
var se = pt.matrixTransform(matrix);
// make a div in the screen space around the object
var $div = $('<div class="bbox"/>').css({
left: nw.x,
top: nw.y,
width: se.x - nw.x,
height: se.y - nw.y
})
.appendTo('body');
Вы можете увидеть мой тест здесь: http://jsfiddle.net/nrabinowitz/zr2jX/
Однако, как показывает тест, этот подход не работает, когда в преобразование включено вращение — похоже, что ограничивающая рамка вычисляется до поворота, поэтому получение углов повернутой ограничивающей рамки не работает.
Как правильно рассчитать невращающуюся ограничивающую рамку преобразованных элементов?
