Question

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

我试图在SVG中绘制一些文本，然后在其周围放置一个矩形，并在SnapSVG的右侧添加填充。这适用于任何网络安全字体。但是，当我从Google导入字体时，.getBBox（）返回的宽度错误。 SO的Web片段似乎并不能解决问题，因此我在这里输入了代码，但是要查看实际的问题，您需要转到下面的Codepen。

var testsvg = Snap('#test')
testsvg.rect(0,0,400,400).attr({})
var pretext=testsvg.text(100,50,'I am the very model of').attr({fill:'white','font-family':"Asap"})
var text=testsvg.text(100,100,'I am the very model of').attr({fill:'white','font-family':"Asap"})
console.log(text.getBBox().width)
var boundrect=testsvg.rect(100,100-text.getBBox().height,text.getBBox().width+10,text.getBBox().height).attr({stroke:'white',fill:'none'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<style>
	@import url('https://fonts.googleapis.com/css?family=Asap');
</style>

<svg id='test' height='400' width='400'></svg>

这是codepen：https://codepen.io/austinclemens/pen/WKZayE

您会注意到该矩形的宽度应为文本宽度+ 10，但最终并未完全包围该框。如果将文本更改为Arial，它将立即生效。此外，如果将文本更改为Arial，然后又更改为Asap，则Asap突然可用。我在Safari，Chrome和Firefox中遇到了该错误。在执行JS之前添加window.onload（）似乎无济于事，也没有使用任意等待。

因此，我怀疑这与字体加载有关。我以为也许可以通过“初始化”字体来解决它，可以这样说，首先做一个不同的文本对象，但这无济于事。我可以使用HTML解决方案，但是在我的实际应用程序中这将非常麻烦，因此，我希望尽可能地使其仅与Snap一起使用。我实际上也不认为这是一个快速的问题。查看snap的getbbox函数，它使用this.node.getClientRects（）作为文本，在此处返回错误的宽度。

Answer 1

根据LGSon的推荐文章，我使用fontfaceobserver通过加载带有承诺的字体来解决此问题：https://github.com/bramstein/fontfaceobserver

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

1 个答案: