为什么Text元素上的SVG bbox方法在不同的浏览器中给出不同的结果？

Question

我有一个SVG文本元素.我在IE9,Chrome和Firefox中得到了它的bbox,这三个都给了我不同的价值.

我创建了一个非常简单的jsfiddle,显示SVG文本及其大小,以便您可以看到我的意思.我也试过客户端rect看看它是否更好.

HTML/SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="75px">
    <text font-size="8pt" id="text_name" x="30" y="44" fill="#000000" stroke-width="0pt" font-family="Arial,Helvetica,sans-serif" text-anchor="middle" visibility="inherit">
        <tspan x="30" y="44" dy="8">Text Content</tspan></text>
</svg> 
<div id="size"></div>

测试javascript

var bbox1 = document.getElementById("text_name").getBBox();
var f = document.getElementById("text_name").getClientRects();
document.getElementById("size").innerHTML = "<p>Width:" + bbox1.width + " Height: " + bbox1.height + "<br>" +  "Width:" + f[0].width +  " Height: " + f[0].height + "</p>";

如您所见,使用的字体是常见的Arial,它存在于三个经过测试的浏览器中,并且还指定了font-size.因此我期望文本在所有三个浏览器中具有相同的界限.我需要计算文本边界,以便我可以将其导出并在其他工具中重复使用,因此我需要一致的值.

如果我能弄清楚为什么值不同,我可以进行适当的调整,以确保边界适合所有情况.

以下是getBBox()在不同浏览器中的结果:

IE9 : Width:61.029998779296875 Height: 12.260002136230468
Chrome: Width:61 Height: 14
Firefox: Width:64.63671875 Height: 13

Answer 1

我会考虑设置基本 SVG 的视口以获得更好的结果。可能需要视图装箱来确保文本元素大小调整结果一致。链接的文章非常详细地介绍了这些内容。

<svg height="14" width="61" ...

请参阅SVG 视口和视图框