svgをテキスト要素に追加する - 私に間違った幅を与える

Question

JavaScriptを介してsvgにテキスト要素を追加しています。しかし、xとyの座標を設定したい場合は、xを計算する際にtext要素の幅を間違って返します。

興味深い： Chromeでは、F5またはボタンを使用してページを実現すると、間違った幅を返します.AddressバーでEnterキーを押すと、幅が正しく表示されます。ここで

は小さなコードです：

var capt = document.createElementNS("http://www.w3.org/2000/svg", "text"); 
    // Set any attributes as desired 
    capt.setAttribute("id","capt"); 
    capt.setAttribute("font-family","Righteous"); 
    capt.setAttribute("font-size","30px"); 
    capt.setAttribute("fill", "rgb(19,128,183)"); 
    var myText = document.createTextNode(this.options.captTxt); 
    capt.appendChild(myText); 
    this.elements.jSvgElem.append(capt); 
    capt.setAttribute("x", this.options.windowWidth-this.options.spacer-document.getElementById("capt").offsetWidth); 
    capt.setAttribute("y", this.options.captY+$('#capt').height()); 

Answer 1

OK、問題は他のフォントを使用した場合、ブラウザが正しい幅を計算しないということのようです。フォントを設定しないと正しい幅になりません。

Iは右上隅に基準点（「配置点」）を設定することにより、問題を解決し、属性を設定することにより、テキスト要素をotの：

capt.setAttribute（「テキスト・アンカー」、「終了」 ）; capt.setAttribute（ "alignment-baseline"、 "hanging"）;

この方法では、幅を減算して要素の高さを追加する必要はありません！

Answer 2

バグがあります：http://code.google.com/p/chromium/issues/detail?id=140472

それだけのinitにあなたが（私は削除することができますいくつかの余分な行があることを確信している）の前に、この関数を呼び出す必要がありますので、テキストの幅を算出し、一部の機能事前：

を

fixBug = function() { 
     var text = makeSVG("text", { x: 0, y: 0, fill: "#ffffff", stroke: '#ffffff'}); 
     text.textContent = ""; 
     var svg = $("svg")[0]; 
     svg.appendChild(text); 
     var bbox = text.getBBox(); 
     var Twidth = bbox.width; 
     var Theight = bbox.height; 
     svg.removeChild(text); 

    } 

$（ "svg"） - Jqueryセレクタ