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,
});

我明白了：

我希望矩形比文本稍大一点，但必须有比计算文本的长度和高度更好的方法，并且假设字体大小不会改变。

这是我在 snap docs 中找到的关于文本的唯一结果：http://snapsvg.io/docs/#Paper.text

Answer 1

您可以尝试在文本元素上使用 getBBox()，并使用它来计算矩形的大小。 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 )

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