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.

score 6 · Accepted Answer · answered Jul 13 '12 at 13:41

6

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

answered Jul 13 '12 at 13:41

Demosthenes

76
3

May be worth updating this as Chrome appears to have changed its behavior and the sub-element now has to be wrapped - strangely Edge doesn't care either way. No namespace is needed for either browsers (but others may still be picky). – dav1dsm1th Dec 21 '17 at 22:09

score 3 · Answer 2 · answered May 09 '16 at 20:07

Just to add to the conversation, here's some markup. Chrome and Firefox behave differently and these style tags removed the differences (add to html reset?) You apparently don't need an HTML body so much as the namespace reference xmlns on the tag, be it body or simply div. Also, you would probably want to consider an svg switch tag to test for supported features.

<!doctype html><html><body>

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px">
  <foreignObject width="100" height="57">
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative;
         width:100px;height:57px;overflow:hidden;font-family:Arial;
         font-weight:400;font-size:12px;line-height:100%;">
           Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod
           tempor incididunt ut labore
    </div>
  </foreignObject>
</svg>

</body></html>

I found the main issue with **chrome** only that the `requiredExtensions` attribute from `foreignObject` needed to be omitted. — phil294, Jun 12 '18 at 18:02

SVG foreignObject not showing in Chrome

2 Answers2

Linked