Question

我试图通过使用getBBox（）方法获取边界框，根据文本的宽度和高度放置SVG Text元素。

如果文本使用的是网页安全字体，这在不同浏览器中的效果相当不错，但如果文本使用@ font-face和自定义webfont设置样式，那么Firefox（Mac）中的文本宽度会错误地返回和Safari（iOS）。它在Safari（Mac）和Chrome（Mac）中都能很好地工作。

如果灰色框的宽度与文本相同，则可以在该浏览器中使用。

有没有人知道如何在所有浏览器中获得正确的文本边界框宽度？

Answer 1

浏览器在加载/应用@font-face之前计算BBox，尝试...

onreadystatechange="if(document.readyState == "complete"){init()}"

document.readyState在以下三种状态触发：loading（页面加载时），interactive（当它完成解析但仍然加载资源时）和complete（当浏览器真正完成了），所以你只需在init()完成时添加一个条件来执行document.readyState。

Answer 2

今天我遇到了类似的问题。 Duopixel是正确的，getBBox（）可能会返回momental指标，这可能是意料之外的，因为尚未加载外部字体而是使用了一些标准字体。

WebKit中的问题（在Chrome 24.0.1312.52和26.0.1389.0 canary中测试）是浏览器延迟外部字体加载，直到它首次在页面的任何位置有效使用。因此，即使您等待onreadystatechange变为“完成”，也不能保证在调用getBBox（）时准备好字体度量 - 您可能仍然是第一个呈现使用外部字体设置样式的文本，将其插入文档并立即调用getBBox（）就可以了（我的情况）。

我的解决方法，而不是直接调用mySVGInitCode（）我做：

$("body").append(
  $("<div/>")
    .attr("class", "force-external-font-loading")
    .attr("style", "font-family: \"xkcd\";visibility:hidden;position:absolute")
    .text("x")
  );
setTimeout(function(){ mySVGInitCode() }, 100); // 100ms is just arbitrary waiting time which should be sufficient for fetching the external font on a fast network, anyone has a better solution?

正如您所看到的，我动态插入绝对定位的样式文本以强制外部字体加载（可见性：隐藏在这里很重要，而不是display：none）。然后我等待一段时间才能执行可能会呈现某些内容的SVG代码，然后立即询问指标。

使用@ font-face时，SVG文本边界框在浏览器与浏览器之间有所不同？

2 个答案: