SVG foreignObject不在Safari中显示 [英] SVG foreignObject doesn't display in Safari

问题描述

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

I'm using d3 with svg:foreignObject to create a formatted text box that appears next to a data point on hover. The below strategy works perfectly in Chrome, but the foreignObject is not visible in Safari. The Safari inspector shows the foreignObject in the DOM, in the proper location and with all the correct data. I just can't see it! What am I missing?

我的代码如下所示：

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中）。我可以设置上面的高度，如下所示：

EDIT
It turns out the issue is that foreignObject requires a height attribute in order to display in Safari (but not in Chrome, interestingly). I can set the height after the above, like so:

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

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

But the problem now is getting the height of the text box that has no height attribute (because the height needs to vary with the length of the text). I think something like getComputedTextLength might work, but I can't quite figure it out. Any suggestions greatly appreciated.

推荐答案

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

you should set height and width property to 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中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！