SVG foreignObject在Safari中无法显示。

Question

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

我的代码如下：

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需要一个高度属性才能在Safari中显示（但是在Chrome中则不需要，有趣的是）。我可以在上面设置高度，像这样：

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

但现在的问题是如何获取没有高度属性的文本框的高度（因为高度需要随着文本长度变化）。我认为 getComputedTextLength 这样的东西可能会有用，但我无法完全弄清楚。非常感谢任何建议。

- user6647072

---

可以确认，设置宽度和高度可以确保在Safari上正确显示foreignObject。 - James

我已经设置了宽度和高度，但在Safari中无法正确显示。所有复选框都出现在屏幕的左上角，但在Chrome中显示正常。 - NuclearPeon

用这个修复了：https://dev59.com/Qmsy5IYBdhLWcg3w-zB4#31303446 - NuclearPeon

Answer 1

你应该为foreignObject设置高度和宽度属性。

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

- peng

---

是的，如果您在原始帖子上看到编辑，则设置高度是有效的。问题是如何在不明确设置高度的情况下实现这一点- 在原始情况下，高度需要随文本长度而变化。 - user6647072