Metin öğesinde SVG bbox yöntemi neden farklı bir tarayıcıda farklı sonuç veriyor?

Question

Bir SVG metin elemanım var. IE9, Chrome ve Firefox'taki bbox'ını alıyorum ve bunların her biri bana farklı değerler veriyor.

Ben ne demek istediğimi görebilirsiniz SVG metin ve boyutunu görüntüler gerçekten basit jsfiddle oluşturmak ettik. Ayrıca daha iyi olup olmadığını görmek için müşteri rektini denedim.

HTML/SVG Gördüğünüz gibi, kullanılan yazı tipi üç test tarayıcılar ve mevcuttur yaygın 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> 

Testi yazı tipi boyutu da belirtilir. Bu nedenle, metnin üç tarayıcıda da aynı sınırlara sahip olmasını bekledim. Metin sınırlarını hesaplamalıyım, böylece dışa aktarabilirim ve başka bir araçta kullanabilirim, bu yüzden tutarlı bir değere ihtiyacım var.

değerleri farklılık neden anlamaya yapabiliyorsa, ben doğru ayar sınırları her durumda uygun olacaktır emin olmak için yapabiliriz. İşte

farklı tarayıcılarda getBBox sonuçları() şunlardır:

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

Answer 1

daha iyi sonuçlar elde etmek için temel SVG görüş alanını ayarlama içine bakmak istiyorum. Metin öğesi boyutlandırmanın tutarlı sonuçlar sağladığından emin olmak için boksu görmek gerekebilir. Bağlantılı makalede bu son derece iyi detaylar.

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

SVG Viewport and View Box