Snap.svgとダイナミックテキスト

Question

私はこれは私が試したものです、スナップが作成したSVGに動的にテキストを配置しようとしている：

this.setContent(
    `<svg id="${this.svgId}"></svg>` 
); 

var snap = Snap($(`#${this.svgId}`)[0]); 
text = "asdfsdfsdsfd"; 

var rect = snap.paper.rect(0, 0, 50, text.length*3 + 4, 10); 
snap.text(1.5,10, text); 

console.log("rect", rect); 
console.log("snap", snap); 

rect.attr({ 
    fill: "#FFFFFF", 
    fillOpacity: 0.6, 
}); 

私はこの取得：

を私は長方形をしたいですテキストより少し大きめですが、テキストの長さと高さを計算するよりも良い方法があります。これは、フォントサイズが変わらないと仮定しています。 http://snapsvg.io/docs/#Paper.text

Answer 1

あなたはテキスト要素にgetBBox（）を使用してみてください、と矩形の大きさを把握することを使用することができます。

これは私がスナップドキュメント内のテキストに関する見つけた唯一の結果です。 getBBox（）はx、y、幅、高さ、x2、y2の数値を返します。

vat text = s.text(0,0,'blah blah') 
var bb = text.getBBox(); 
var rect = s.rect(bb.x, bb.y, bb.width, bb.height) 

任意の詰め物などのオフセットを調整します。私はそれが含まれているとは思わないので、また、ストロークの幅を許可する必要があります。