Javascript offsetWidth，使用加载字体时SVG宽度不正确

编辑-最初认为这只是一个SVG问题，但似乎应用范围更广

我试图在SVG中绘制一些文本，然后在其周围放置一个矩形，并在SnapSVG的右侧填充。这适用于任何网络安全字体。但是，当我从google导入字体时，.getBBox（）返回错误的宽度。所以的web代码片段似乎没有复制问题，所以我在这里输入了代码，但要查看实际问题，需要转到下面的代码笔

var testsvg=Snap（“#test”）
testsvg.rect（0,0400400）.attr（{}）
var-pretext=testsvg.text（100,50，'我就是'）.attr（{fill:'white'，'font-family'：'Asap}）
var text=testsvg.text（100100，'I'm the very model of'）.attr（{fill:'white'，'font-family'：'Asap}）
console.log（text.getBBox（）.width）
var boundrect=testsvg.rect（100100 text.getBBox（）.height，text.getBBox（）.width+10，text.getBBox（）.height）.attr（{stroke:'white'，fill:'none'}）

@导入url（'https://fonts.googleapis.com/css?family=Asap');

根据LGSon推荐的帖子，我使用fontfaceobserver通过加载带有承诺的字体来解决这个问题：

啊，我在代码笔中添加了一个html测试，但它也不起作用。使用setTimeout等待获取长度，直到绘制元素后才能生效。但这似乎非常笨拙。这个问题有没有公认的解决方案？这可能会有帮助：