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 Viewport and View Box

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

1 个答案: