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) 

用偏移调整你想要的任何填充等。您可能还需要考虑笔画宽度，因为我认为这不包括在内。