我将 d3 与 svg:foreignObject 结合使用来创建一个格式化的文本框,该文本框在悬停时显示在数据点旁边。以下策略在 Chrome 中完美运行,但 foreignObject 在 Safari 中不可见。 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 需要一个高度属性才能在 Safari 中显示(有趣的是,在 Chrome 中则不需要)。我可以在上面设置高度,像这样:
d3.select('#desc').attr('height', height);
但是现在的问题是获取没有height属性的文本框的高度(因为高度需要随着文本的长度而变化)。我认为像 getComputedTextLength 这样的方法可能有用,但我不太明白。非常感谢任何建议。
最佳答案
您应该将高度和宽度属性设置为 foriegnObject。
var description = svg.append('foreignObject')
.attr('class', 'description')
.attr('id', 'desc')
.attr('x', x)
.attr('y', y)
.attr('width', width)
.attr('height', xxx);
关于javascript - SVG foreignObject 不在 Safari 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38624603/