svg bbox issue
Unanswered
Philippine Crocodile posted this in #help-forum
Philippine CrocodileOP
hi all. i'm trying to identify the closest svg element to a set of coordinates and this is the function
when i print the bbox, all i get is a rect with all 0s even though they clearly have a nonzero position. i'm not sure how to fix it. here's how the svg element can look like:
function findClosestElement(
candidates: SVGGraphicsElement[],
targetX: number,
targetY: number
): Element | null {
let closest: Element | null = null;
let minDistance = Infinity;
candidates.forEach((el) => {
const bbox = el.getBBox();
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;
console.log(bbox);
const dx = centerX - targetX;
const dy = centerY - targetY;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < minDistance) {
minDistance = dist;
closest = el;
}
});
return closest;
}
when i print the bbox, all i get is a rect with all 0s even though they clearly have a nonzero position. i'm not sure how to fix it. here's how the svg element can look like:
<text transform="matrix(0.9 0 0 1 68.4253 192.6221)" style="">some text</text>
thanks!