Next.js Discord

Discord Forum

svg bbox issue

Unanswered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
hi all. i'm trying to identify the closest svg element to a set of coordinates and this is the function
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!

0 Replies