4

SVGテキスト要素の「タイトな」境界が必要です。を使用するgetBBoxと、テキスト内の特定の文字に関係なく、フォントの可能な完全なグリフの高さを含むように見える高さが得られます。幅で得られるものはブラウザごとに異なりますが、通常、文字が実際に占める長さよりも数単位多く含まれています。テキスト内の文字のみを正確にラップするボックスを取得する方法はありますか？

たとえば、下に作成したrectでテキスト「.....」をしっかりとラップしたいのですが、。によって返されるバウンディングボックスには「残り」の垂直方向のスペースがたくさんありますgetBBox。助けてくれてありがとう。これはStackOverflowへの私の最初の投稿なので、フォーマット/質問のプレゼンテーションの批評も歓迎します。

<svg width="400" height="400">
        <text>.....</text>
        <rect style="fill:none;stroke:rgb(0,100,100);stroke-width:1"/>
</svg>

<script type="text/javascript">
    var layout = function() {
        var numB = $("text").get(0).getBBox();
        $("rect").attr("x", 0);
        $("rect").attr("y", 0);
        $("rect").attr("width", numB.width);
        $("rect").attr("height", numB.height);
        $("text").attr("y", numB.height);
    }
    
    document.onreadystatechange = function () {
        if (document.readyState == "complete") {
            layout();
        }
    }
</script>
4

2 に答える 2

3

この問題に遭遇した他の人にとって、私は最終的にこのツールから望んでいたものを手に入れたかもしれません: Font.js . Verdana で、単一の文字と文字列のピクセル単位の境界を取得できました。

于 2013-03-10T02:18:50.550 に答える
3

あなたの質問は的を射ていますが、答えは簡単ではありません。

SVG フォントを使用している場合は、フォント ファイル内のメトリックにアクセスできます。ディセンダー、アセンダー、ベースライン、xheight のメトリックが含まれます。したがって、文字列にディセンダー (jgqp など)、大文字などがあるかどうかを確認できます。それはまだトリッキーで、完全に正確ではありません。

2 番目に試すことができるのは、同じテキストをキャンバスにレンダリングし、寸法を確認することです。これを行う方法が正確にはわかりません。複雑すぎてはいけません。

于 2013-03-08T20:03:51.323 に答える