CODEWITHSUNDEEP
d3.jscanvassvg
PamB
PamB

Reputation: 23

D3JS foreignObject not rendering in Firefox

I'm working with D3 and trying to put some HTML in a rectangle. Currently my code looks like this:

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>'; }

This works as expected on chrome as expected, but fails to render 'foobar' in firefox. I've tried using .attr("requiredExtensions", "http://www.w3.org/1999/xhtml").append("xhtml:div")

as well but haven't had success. Is there something obvious I'm missing?

Upvotes: 1

Views: 471

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

you've no width and height attributes. They are required in SVG 1.1 (which Firefox implements).

SVG 2 proposes to have a different sizing mechanism where width and height are mapped CSS properties. Chrome/Opera has implemented this, although I don't think any other UA has yet.

Upvotes: 4

Related Questions