Snap.svg和动态文本

Question

我试图将文本动态地放置到Snap创建的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（），然后使用它来计算rect的大小。 getBBox（）将为您提供x，y，width，height，x2，y2的数字来帮助您。

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

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