如何获得 SVG 文本元素的紧密边界框

Question

通常为了获取 SVG 中任何元素的边界框，我们使用 getBoundingClientRect() 或 getBBox() 分别给出顶部、底部、左、右、宽度、高度或 x、y、宽度、高度。但是，当文本旋转时，这些值不足以获得元素的紧密边界框，因为由这些值形成的框将具有水平和垂直边缘，而不是与文本平行。如何为旋转文本选择紧密边界框，如下图所示。（Chrome Inspect Element Selector 突出显示了该文本。）

Answer 1

我认为如果你想要这 4 个点，你可能必须使用与元素相同的变换在边界框上对它们进行变换。如果只是为了显示，只需对已显示的边界框应用相同的变换即可。我想如果你想要4点，那就有点复杂了，但可能有更简单的方法。

无论如何，这可能很有用。

我们抓住文本的边界框。我们抓取元素上的矩阵（在本例中为旋转）。然后我们将其应用于从边界框收集的所有点。我添加了更多代码，只是为了在这些点处创建圆圈，以突出显示它。

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


function getTransformedPts( 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;
}

function matrixXY(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)
}

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