Javascript SVG foreignObject不';t在Safari中显示
我将d3与svg:foreignObject一起使用,创建一个格式化文本框,该文本框显示在悬停时的数据点旁边。下面的策略在Chrome中非常有效,但在Safari中看不到foreignObject。Safari检查器在DOM中显示foreignObject,该对象位于正确的位置,并且包含所有正确的数据。我就是看不见!我错过了什么 我的代码如下所示:Javascript SVG foreignObject不';t在Safari中显示,javascript,css,d3.js,svg,safari,Javascript,Css,D3.js,Svg,Safari,我将d3与svg:foreignObject一起使用,创建一个格式化文本框,该文本框显示在悬停时的数据点旁边。下面的策略在Chrome中非常有效,但在Safari中看不到foreignObject。Safari检查器在DOM中显示foreignObject,该对象位于正确的位置,并且包含所有正确的数据。我就是看不见!我错过了什么 我的代码如下所示: var description = svg.append('foreignObject') .attr('class', 'descriptio
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');
但是现在的问题是获取没有高度属性的文本框的高度(因为高度需要随文本的长度而变化)。我想像getComputedTextLength这样的东西可能会有用,但我不太明白。非常感谢您的建议。您应该将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);
可以确认,设置宽度和高度可以确保在safari上正确显示ForiegObject。我已经设置了宽度和高度,但我无法在safari中正确显示。所有我的复选框都显示在屏幕的左上角,但在ChromeFixed中显示良好:是的,如果您看到原始帖子上的编辑,则设置高度可以正常工作。问题是如何在不明确设置高度的情况下做到这一点——在最初的情况下,高度需要随文本的长度而变化。
var description = svg.append('foreignObject')
.attr('class', 'description')
.attr('id', 'desc')
.attr('x', x)
.attr('y', y)
.attr('width', width)
.attr('height', xxx);