text - 计算 SVG 文本高度和宽度的正确方法

Question

我需要计算 svg 文本元素的高度和宽度。有没有办法在不实际将其添加到我页面的 DOM 的情况下这样做？我只需要措施而不是实际元素。

我既不使用 d3 也不使用 Raphael，而只使用纯 JavaScript。 (也许我应该使用前者之一进行计算？)

我所追求的只是一个像 imagettfbbox 这样的函数在 PHP 中，但在纯 JavaScript 中。有这样的事情吗？或者写起来容易吗？

由于我实际上并没有使用文本元素，因此添加和隐藏它们对我来说似乎很奇怪(我还在某处读到 Firefox 在计算隐藏元素的 bbox 时遇到问题， Calculating vertical height of a SVG text )。但也许这是唯一的出路？在这种情况下，我是否必须使用不透明度？之后我会以某种方式破坏元素吗？

Answer 1

也许没有什么好方法可以完全实现我所追求的目标。但是，放弃“没有实际将其添加到我页面的 DOM”部分，以下功能似乎实现了我的目标。

function bboxText( svgDocument, string ) {
    var data = svgDocument.createTextNode( string );

    var svgElement = svgDocument.createElementNS( svgns, "text" );
    svgElement.appendChild(data);

    svgDocument.documentElement.appendChild( svgElement );

    var bbox = svgElement.getBBox();

    svgElement.parentNode.removeChild(svgElement);

    return bbox;
}

编辑:

计算高度的一个注意事项:返回的bbox的高度，即 bbox.height , 始终是字形的完整高度，即 a将具有与 A 相同的高度.我找不到更准确地计算它们的方法。

但是，可以计算大写重音字符的高度，例如 Ä .这将只是 bbox y 坐标的负数，即 -bbox.y .

例如，使用这个可以计算一些垂直对齐的坐标。例如模拟 dominantBaseline属性设置为 text-before-edge , text-after-edge , 和 central .
text-before-edge : dy = -bbox.y text-after-edge : dy = -bbox.height -bbox.y central : dy = -bbox.y -bbox.height/2
哪里 dy是垂直平移。这可用于绕过某些应用程序的限制，这些应用程序不支持由属性设置的这些对齐方式。