D3JS foreignObject不在Firefox中渲染

Question

我正在使用D3并试图将一些HTML放在一个矩形中。目前我的代码看起来是这样的：

node.append("foreignObject") 
      .attr("display", "block") 
      .attr("dy", ".35em") 
      .attr("transform", null) 
      .html(function(d) { return sidebarInformation(d); }) 
      .attr("x", 12) 
      .attr("y", 12) 
      .attr("text-anchor", "start"); 

function sidebarInformation(_element){ return '<div>foobar</div>'; } 

这部作品chrome如预期所料，但无法呈现“foobar的”在Firefox。我试过使用.attr("requiredExtensions", "http://www.w3.org/1999/xhtml").append("xhtml:div")

以及但没有成功。有什么明显的我失踪了吗？

Answer 1

你没有宽度和高度属性。它们在SVG 1.1（Firefox实现）中是必需的。

SVG 2提出了一种不同的尺寸调整机制，其中宽度和高度映射为CSS属性。 Chrome/Opera已经实现了这一点，但我认为还没有其他的UA。