我需要一个SVG文本元素的边界框,但API函数getBBox
和getComputedTextLength
(理论上应该做我想要的)非常不稳定。
如果我使用矩阵变换放大svg
元素,则返回的值通常太小。
示例html:
<svg preserveAspectRatio="none" viewBox="-1 -1 2 2">
<g transform="matrix(0.02 0 0 0.02 -0.7 0)">
<text x="0" y="0" font-family="Verdana" font-size="10">
Some long text
</text>
</g>
</svg>
此文本的长度(由getComputedTextLength
返回)应约为76.但是,如果我将变换矩阵更改为matrix(3 0 0 3 -0.7 0.01)
,则总长度现在要低得多(约为19)。
生活示例:https://codepen.io/anon/pen/QvgRaR
注意:问题出现在Google Chrome和Firefox上,但不会出现在Microsoft Edge中。
如何可靠地检索SVG元素的边界框,无论是否有任何缩放?