Mam element tekstowy SVG. Dostaję jego boks w IE9, Chrome i Firefox i wszystkie trzy dają mi różne wartości.Dlaczego metoda boksowa SVG na elemencie Tekst daje inny wynik w innej przeglądarce?
Stworzyłem naprawdę prosty jsfiddle, który wyświetla tekst SVG i jego rozmiar, dzięki czemu można zobaczyć, co mam na myśli. Próbowałem również klienta rect, aby sprawdzić, czy jest lepszy.
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>
testowania 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>";
Jak widać, czcionka użyta jest wspólnym Arial, który jest obecny we wszystkich trzech testowanych przeglądarkach i tym rozmiar czcionki jest również określony. Dlatego oczekiwałem, że tekst będzie miał te same granice we wszystkich trzech przeglądarkach. Muszę obliczyć ograniczenia tekstowe, aby móc je wyeksportować i ponownie użyć w innym narzędziu, więc potrzebuję wartości, które są spójne.
Jeśli mogę zrozumieć, dlaczego wartości różnią się, mógłbym dokonać odpowiedniego dopasowania, aby upewnić się, że granice będą odpowiednie we wszystkich przypadkach.
Oto wyniki getBBox() w różnych przeglądarkach:
IE9 : Width:61.029998779296875 Height: 12.260002136230468
Chrome: Width:61 Height: 14
Firefox: Width:64.63671875 Height: 13
Można użyć wartości max w trzech wartości. – cuixiping
@cuixiping Masz na myśli wyższe ograniczenia ze wszystkich trzech przeglądarek? Problem polega na tym, że nie mam innych porównań. Mój klient używa jednej przeglądarki, która daje mi wartość, z którą muszę pracować. – Melanie