计算SVG文本的垂直高度

Sca*_*ffe 10 javascript svg text tspan

我有一个字符串数组.说,

['Jan 11','Feb 11']
Run Code Online (Sandbox Code Playgroud)

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

<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>
Run Code Online (Sandbox Code Playgroud)

在渲染svg之后,我发现文本的高度是36px.现在有一种方法可以计算预先根据字体大小预先渲染的文本的高度吗?

bjo*_*rnd 15

您可以使用getBBox方法计算SVG节点的维度.

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

//bbox now have x, y, width and height properties
Run Code Online (Sandbox Code Playgroud)

  • 是的。但这是在节点渲染之后。我正在寻找一种仅使用数组字符串在渲染之前计算高度的方法。 (3认同)
  • 您可以使用`visibility ="hidden"指定附加节点,然后调用getBBox,然后在进行所需的任何调整时取消隐藏它.由于svg不使用CSS框模型,因此不会影响其他svg元素的布局.这样做很好,因为text元素上的某些属性可能取决于上下文(父元素,级联样式等). (3认同)
  • 在隐藏节点上调用getBBox()并在Firefox中抛出异常 (3认同)
  • 值得注意的是,在文本节点上调用`getBBox`会在IE10和IE11中返回不准确的测量值https://connect.microsoft.com/IE/feedback/details/791152/svg-getbbox-return-incorrect-value-for-text-elements-在-IE10严肃蝽 (2认同)