なぜテキスト要素のSVG bboxメソッドが異なるブラウザで異なる結果になるのですか？

Question

私はSVGテキスト要素を持っています。私はIE9、Chrome、Firefoxでbboxを取得していますが、その3つすべてが私にさまざまな価値をもたらします。

私は本当にシンプルなjsfiddleを作成しました。これはSVGテキストとそのサイズを表示するので、意味を理解することができます。私はクライアントrectを試して、それがもっと良いかどうかを調べました。

HTML/SVGあなたが見ることができるように、使用するフォントは、試験した3つのブラウザとに存在する共通のArial、ある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>"; 

<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> 

テストfont-sizeも指定されています。したがって、私は、3つのブラウザすべてでテキストの境界が同じになることを期待していました。私はそれをエクスポートして別のツールで再利用できるようにテキスト境界を計算する必要があるので、一貫性のある値が必要です。

なぜ値が異なるのか分かりましたら、境界がすべての場合に適切になるように適切な調整を行うことができます。ここで

は、異なるブラウザで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" ... 

次の3つの値で最大値を使用することができますSVG Viewport and View Box