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

Question

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

我既不使用d3也不使用Raphael,而只使用简单的JavaScript.(也许我应该使用前者之一进行计算？)

我所追求的只是一个像imagettfbboxPHP 一样的函数,但在纯JavaScript中.有这样的事吗？还是写起来容易？

因为我实际上并没有使用文本元素,所以添加它们并隐藏它们似乎很奇怪(我也读过Firefox在计算隐藏元素的bbox时遇到问题,计算SVG文本的垂直高度).但也许这是唯一的出路？在这种情况下,我是否必须使用不透明度？之后我会以某种方式破坏元素吗？

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垂直翻译在哪里.这可用于解决某些不支持属性设置的对齐的应用程序的限制.