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数字来帮助。

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

使用您想要的任何填充等的偏移进行调整。您可能还需要允许笔画宽度，因为我认为不包括。