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。