【发布时间】：2013-05-01 19:55:45
【问题描述】：
我有一个 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
【问题讨论】：
-
可以使用三个值中的最大值。
-
@cuixiping 你的意思是所有三个浏览器的上限？问题是我没有其他界限可以比较。我的客户使用一个浏览器，它给了我一个我必须使用的价值。
-
所以 6 年后，Edge 和 Chrome 现在给出了相似的结果，而 Firefox 有不同的值。边缘：宽度：61.90625 高度：12 铬：宽度：61.90625 高度：12 Firefox：宽度：63 高度：12
-
你不应该期望 firefox 和 chrome 有完全相同的结果。而且你也不应该期望 windows 和 mac 有完全相同的结果。
标签： javascript svg