计算 SVG 文本的垂直高度答案

【问题标题】：Calculating vertical height of a SVG text计算 SVG 文本的垂直高度
【发布时间】：2011-12-06 23:19:11
【问题描述】：

我有一个字符串数组。说，

['Jan 11','Feb 11']

我正在用这些字符串创建一个垂直文本，像这样

<text x="60" y="154" text-anchor="middle" style="text-anchor: middle; font: normal normal normal 12px/normal Helvetica, Arial; " font="12px Helvetica, Arial" stroke="none" fill="#ffffff" transform="rotate(90 59.75 150)">
<tspan>Jan 11</tspan>
</text>

渲染 svg 后，我发现文本的高度为 36px。现在有没有办法在给定字体大小的情况下计算将预先呈现的文本的高度？

【问题讨论】：

标签： javascript text svg tspan

【解决方案1】：

您可以使用getBBox 方法来计算SVG 节点的尺寸。

var textNode = document.getElementsByTagName('text'),
    bbox = textNode.getBBox();

//bbox now have x, y, width and height properties

【讨论】：

是的。但那是在节点被渲染之后。我正在寻找一种仅使用数组字符串在渲染之前计算高度的方法。
您可以附加指定visibility="hidden" 的节点，然后调用getBBox，然后在进行所需的任何调整后取消隐藏它。由于 svg 不使用 CSS 盒子模型，它不会影响其他 svg 元素的布局。这样做很好，因为文本元素上的某些属性可能取决于上下文（父元素、级联样式等）。
在隐藏节点上调用 getBBox() 并在 Firefox 中抛出异常
我注意到他们在this 示例中将“不透明度”设置为 0，而不是使用可见性。也许是为了解决 Firefox 的问题？
值得注意的是，在文本节点上调用 getBBox 会在 IE10 和 IE11 中返回不准确的测量值 connect.microsoft.com/IE/feedback/details/791152/…