Why does the SVG bbox method in a text element give different results in another browser?

Question

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

I created a really simple jsfiddle that displays SVG text and its size so you can see what I mean. I also tried the client directly to see if it was 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> 

Check 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 usual Arial, which is present in three proven browsers, as well as the font size. Therefore, I expected the text to have the same borders in all three browsers. I need to calculate the borders of the text so that I can export and reuse it in another tool, so I need consistent values.

If I can understand why the values ​​are different, I could do the right setup to make sure that the borders are appropriate 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 

Answer 1

I would look at setting up the Viewport of your base SVG to get the best results. A box view may be required to ensure that the size of the text element is uniform. A related article details this.

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

See SVG Viewer and Viewer.