How Get Tight Bounding Box Of An Svg Text Element

Usually in order to get bounding box of any element in SVG we use getBoundingClientRect() or getBBox() which gives us top, bottom, left, right, width, height or x, y, width, height

Solution 1:

I think if you want the 4 points, you may have to transform them on the bounding box with the same transform as the element. If it's just for display, just apply the same transform to a bounding box that has been displayed. I think if you want the 4 points, it's a bit more complicated, but there may be a simpler way.

This may be useful anyway.

We grab the bounding box of the text. We grab the matrix (in this case rotation) on the element. Then we apply that to all the points we gather from the bounding box. I've added a bit more code, just to create circles at the points, to highlight it.

var text = document.querySelector('text');
var svg = document.querySelector('svg')


functiongetTransformedPts( el ) {
  var m = el.getCTM();
  var bb = el.getBBox();
  var tpts = [
    matrixXY(m,bb.x,bb.y),
    matrixXY(m,bb.x+bb.width,bb.y),
    matrixXY(m,bb.x+bb.width,bb.y+bb.height),
    matrixXY(m,bb.x,bb.y+bb.height) ]
  
  return tpts;
}

functionmatrixXY(m,x,y) {
            return { x: x * m.a + y * m.c + m.e, y: x * m.b + y * m.d + m.f };
}

var pts = getTransformedPts( text );

for( pt in pts ) {
  var c = document.createElementNS("http://www.w3.org/2000/svg","circle");
  c.setAttribute('cx', pts[pt].x);
  c.setAttribute('cy', pts[pt].y);
  c.setAttribute('r',3)
  svg.append(c)
}

<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"width="800"height="800"><textx="50"y="50"transform="rotate(10)"font-size="30">testing rotated text box points</text></svg>

Solution 2:

If you are getting the bounding box of a <text> element using getBBox(), then it normally is the unrotated bounding box. That's because getBBox() does not include the elements transform when calculating the value to return.

For example, have a look at the example below. Compare the text BBox and the BBox of its parent group element.

var text = document.getElementById("text");
var b = text.getBBox();
console.log("text bbox="+[b.x,b.y,b.width,b.height].join(' '));

var group = document.getElementById("group");
var b = group.getBBox();
console.log("group bbox="+[b.x,b.y,b.width,b.height].join(' '));

<svgwidth="300"height="300"><gid ="group"><textid="text"x="150"y="150"text-anchor="middle"font-size="30"transform="rotate(45,150,150)">ROTATED</text></g></svg>

Solution 3:

There is no direct method to achieve this. But you can try the below solution.

How to get rotated svg text bounds in javascript programmatically