计算SVG文本的垂直高度

我有一个字符串数组。再说了，计算SVG文本的垂直高度

['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。现在有没有一种方法可以计算出预先给定字体大小的文本的高度？

来源

2011-10-13 Scaraffe

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

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

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

来源

2011-10-13 13:27:33 bjornd

是的。但是，这是节点已被渲染后。我正在寻找一种方法来计算渲染前使用只有数组字符串的高度。 – Scaraffe

你可以在节点上追加'visibility =“hidden”'，然后调用getBBox，然后在你做出任何需要的调整时取消隐藏。由于svg不使用CSS盒模型，它不会影响其他svg元素的布局。这样做很好，因为文本元素的一些属性可能取决于上下文（父元素，级联样式等）。 –

在隐藏节点上调用getBBox（），在Firefox中引发异常 – sym3tri

计算SVG文本的垂直高度

回答

相关问题