8

SVG テキスト要素があります。私はその bbox を IE9、Chrome、Firefox で取得していますが、これら 3 つすべてで異なる値が得られます。

SVG テキストとそのサイズを表示する非常に単純なjsfiddleを作成したので、意味がわかります。また、クライアント rect を試して、それがより良いかどうかを確認しました。

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>

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

ご覧のとおり、使用されているフォントは、テスト済みの 3 つのブラウザーに存在する一般的な Arial であり、font-size も指定されています。したがって、3 つのブラウザーすべてでテキストの境界が同じであると予想していました。エクスポートして別のツールで再利用できるように、テキスト境界を計算する必要があるため、一貫した値が必要です。

値が異なる理由を理解できれば、適切な調整を行って、境界がすべての場合に適切であることを確認できます。

以下は、さまざまなブラウザーでの getBBox() の結果です。

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 に答える