SVG foreignObject not showing in Chrome

Question

I have an SVG element with a foreignObject which contains a div. Then in my js I do this:

$("#wrapper>svg>foreignObject>div").sparkline(data);

which creates a canvas within the div. When I look at the firebug html code for the two browser are:

Firefox:

<svg>
    <foreignObject width="20" height="20" x="10" y="-10">
       <div>
          <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas>
       </div>
    </foreignObject>
</svg>

Chrome:

<svg>
    <foreignobject width="20" height="20" x="10" y="-10"/>
<svg>

In chrome it doesnt even show the div. The way I create the div is

nodeEnter.append("foreignObject")
  .attr("width", "20")
  .attr("height", "20")
  .attr("x", "10")
  .attr("y","-10");

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox is working as I am expecting it to work. But chrome does not. Does anyone have any suggestions?

Also, I think part of the problem is that the chrome firebug HTML output shows "foreignobject" but the Firefox shows "foreignObject" the way I appended.

Answer 1

You need to have an HTML body be the sub-element of foreignobject. Once you have that you can put anything inside the body.