0

我正在尝试使用封装 DVI DOM 元素的 foreignObject SVG 元素在 SVG 中实现文本流。我的问题是设置了哪些 CSS 参数，所以我可以使用自定义的 fon-maily 样式。

我使用以下步骤。

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 块与不同的字体系列设置。

我在这里http://jsfiddle.net/zm7Xb/3/做了一些小例子，我使用 Chrome 得到了正确的结果，使用默认字体显示：inline-block CSS。使用 Helvetica 会产生一个比内部文本更宽的 DIV 元素。使用 google-font 会导致更糟糕的结果。

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

在 Firefox 中测试，结果相同。

我看不出问题出在哪里。也许与这个svg 附加文本元素有关 - 给了我错误的宽度？更重要的是：我能做些什么来解决它？

4

1 回答 1

2

您在许多地方都缺少尺寸，所以东西要么没有尺寸，要么默认为 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。

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

于 2013-10-17T14:00:37.273 回答