28

私は現在SVGを使用しています。位置合わせを行うには、文字列の長さをピクセル単位で知る必要があります。文字列の長さをピクセル単位で取得するにはどうすればよいですか？

更新： nrabinowitzに感謝します。彼の助けに基づいて、動的に追加されたテキストの長さを取得できるようになりました。次に例を示します。

<svg id="main" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" 
    width="1020"
    height="620" 
    viewBox="0 0 1020 620"
    onload="startup(evt)">

<script>
    <![CDATA[
        var startup = function (evt) {
            var width;
            var svgNS = "http://www.w3.org/2000/svg";
            var txtNode = document.createTextNode("Hello");
            text = document.createElementNS(svgNS,"text");

            text.setAttributeNS(null,"x",100);
            text.setAttributeNS(null,"y",100);
            text.setAttributeNS(null,"fill","black");
            text.appendChild(txtNode);                                              
            width = text.getComputedTextLength();               
            alert(" Width before appendChild: "+  width);                       
            document.getElementById("main").appendChild(text);
            width = text.getComputedTextLength();
            alert(" Width after appendChild: "+  width)
            document.getElementById("main").removeChild(text);              
        }       
    //]]>
</script>
</svg>
4

2 に答える 2

40

私もこれに疑問を抱いていましたが、SVG仕様によれば、この情報を返す特定の関数getComputedTextLength（）があることに気づきました。

// access the text element you want to measure
var el = document.getElementsByTagName('text')[3];
el.getComputedTextLength(); // returns a pixel integer

ワーキングフィドル（Chromeでのみテスト済み）：http：//jsfiddle.net/jyams/

于 2012-04-21T00:08:05.927 に答える
5

興味を持ってさまざまな同様のスレッドを読み、いくつかのアイデアの恩恵を受けて、3つのJavascriptメソッドを並べて比較するページを作成しました。私は結果を書き留めました

IE9

Firefox29.0.1および

クローム34.0.1847.131m

あなたはそれをあなたのブラウザにロードして、あなたのために何がうまくいくかを見ることができます：

http://bl.ocks.org/MSCAU/58bba77cdcae42fc2f44。

于 2014-05-10T01:03:27.493 に答える