Question

我使用d3和svg：foreignObject来创建一个格式化的文本框，该文本框出现在悬停的数据点旁边。以下策略在Chrome中完美运行，但在Safari中看不到foreignObject。 Safari检查器在DOM中，在适当的位置显示foreignObject，并显示所有正确的数据。我无法看到它！我错过了什么？

我的代码如下所示：

var description = svg.append('foreignObject')
  .attr('class', 'description')
  .attr('id', 'desc')
  .attr('x', x)
  .attr('y', y)
  .attr('width', width);

var descdiv = description.append('xhtml:div')
  .append('div')
  .attr('id', 'textBox');

descdiv.append('p')
  .attr('class', 'text1')
  .attr('dy', '1em')
  .html('First line');

descdiv.append('p')
  .attr('class', 'text2')
  .attr('dy', '2em')
  .html('<tspan class="text3">' + 'Second line 1st part + '</tspan><tspan class="text4">' + ', ' + 'Second line 2nd part' + '</tspan>');

descdiv.append('p')
  .attr('class', 'text1')
  .attr('dy', '3em')
  .html('Third line');

编辑
事实证明，问题是foreignObject需要一个height属性才能在Safari中显示（但有趣的是在Chrome中不显示）。我可以设置上面的高度，如下：

d3.select('#desc').attr('height', height);

但现在的问题是获得没有高度属性的文本框的高度（因为高度需要随文本的长度而变化）。我觉得像getComputedTextLength这样的东西可能会起作用，但我无法弄明白。任何建议都非常感谢。

Answer 1

您应该将height和width属性设置为foriegnObject。

var description = svg.append('foreignObject')
  .attr('class', 'description')
  .attr('id', 'desc')
  .attr('x', x)
  .attr('y', y)
  .attr('width', width)
  .attr('height', xxx);

SVG foreignObject没有在Safari中显示

1 个答案: