8

I have an SVG text element. I get its bbox in IE9, Chrome and Firefox and all three of them gives me different values.

I've create a really simple jsfiddle that displays an SVG text and its size so you can see what I mean. I've also tried the client rect to see if it was any better.

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>

Test 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>";

As you can see, the font used is the common Arial, which is present in the three tested browsers and the font-size is also specified. I was therefore expecting the text to have the same bounds in all three browsers. I need to calculate the text bounds so I can export it and reuse it in another tool, so I need a values that are consistent.

If I can figure out why the values differ, I could make the proper adjustment to be sure the bounds will be suitable in all cases.

Here are the results of getBBox() in different browsers: 

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

1 回答 1

0

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

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

请参阅SVG 视口和视图框

于 2014-11-14T13:41:27.573 回答