如何通过定义的最大宽度获得精确的DIV大小来模拟SVG中的文本流？

我试图使用封装DVIDOM元素的foreignObject SVG元素实现SVG中的文本流。我的问题是设置了哪些CSS参数，所以我可以使用自定义的fon Maly样式

我使用以下步骤

0. For defined 'maximal-width' value :
1. Make a foreignObject at least max-width wide
2. Put a DIV element inside with some text and max-width : 'maximal-width' style.
3. Get it's size (width x height) and update the size of the foreignObject element in the end.
4. Make some SVG rectangle in the background with the same size as the text/foreignObject element.

预期结果是封装在foreignObject元素中的包装文本大小与背景中的SVG矩形大小相同

但是

我在使用display:inline/inline块和不同的字体系列设置时遇到问题

我在这里做了一些小例子，我使用Chrome，display:inlineblockcss和默认字体获得了支持结果。使用Helvetica会产生一个DIV元素，该元素比内部的文本更宽。使用谷歌字体会导致更糟糕的结果

使用display:inline修复宽度，但会导致错误的垂直大小（高度）。即使使用默认字体

在firefox中测试，结果相同

---

我看不出问题出在哪里。可能和这个有关？更重要的是：我能做些什么来修复它呢？

您在许多地方缺少大小设置，因此东西要么没有大小，要么默认为300 x 150像素。这一切都符合相应的规范，Chrome将在某个时候正确实现这一点，并与Firefox相匹配

首先，您需要将这些样式添加到代码中

html, body {
    width: 100%;
    height: 100%;
}

#svg_container {
    width: 100%;
    height: 100%;
}

您还需要在svg元素上设置宽度/高度，如

var svg = svgContainer.append("svg")
    .attr('width', "100%")
    .attr('height', "100%");

这解决了Firefox中缺少的第二个foreignObject

---

至于为什么不能获得预期的大小，字体加载是异步的，因此您可能在加载所需字体之前测量文本。没有可靠的方法来判断字体是否已加载，因此通常的方法是每隔一段时间检查一次，直到文本大小发生变化。

非常感谢！我将根据您的评论更新我的第一个JSFIDLE。但是，我仍然只能通过显示得到正确的结果：内联块和默认字体。