SVG: Why <p> element is not displaying in <foreignobject> <p>I'm attempting to put a <code>&lt;p&gt;</code> element inside a <code>&lt;foreignobject&gt;</code> inside an <code>&lt;svg&gt;</code> node in chrome but I am not seeing the text. I have inspected the element and the DOM model shows the structure I expect. I created this <a href="http://jsfiddle.net/ujzL8yyr/" rel="nofollow">jsfiddle</a> by copying from the DOM model and lo and behold it works exactly as I desire in the fiddle.</p> <p>After scratching my head for a bit I started looking at the properties in the two tabs (both in Chrome) and the only 2 things at this point that jump out me are that when I hover over the <code>&lt;foreignobject&gt;</code> or <code>&lt;p&gt;</code> element in the fiddle, it shows a grey box the area where it's displayed. When I do this in the real application, it does the same for the <code>&lt;foreignobject&gt;</code> but I see nothing for the <code>&lt;p&gt;</code> element. The second difference is that in the fiddle, the <code>&lt;p&gt;</code> element shows a height and a width of 54px and 100px (respectively) but in the actual application they both are reported to be 'auto'.</p> <p>As an experiment, I attempted to set the height and width explicitly in the CSS for 'p' but chrome just shows this as an 'invalid property'.</p> <p>Assuming this is the problem, I'm a little lost as to how to control a property that I'm not allowed to specify. Can someone help with some advice on how to debug this further? There's clearly something about what I am doing that is causing this but I'm not sure where to look next.</p> <p>EDIT:</p> <p>I don't know why I didn't notice this before but I see a difference that may help explain this. The fiddle shows the properties for the <code>&lt;p&gt;</code> element as:</p> <ul> <li>p.description</li> <li>HTMLParagraphElement</li> <li>HTMLElement</li> <li>Node</li> <li>EventTarget</li> <li>Object</li> </ul> <p>The application shows these properties:</p> <ul> <li>p</li> <li>SVGElement</li> <li>Element</li> <li>Node</li> <li>EventTarget</li> <li>Object</li> </ul> <p>I assume this has something to do with how d3 is adding the <code>&lt;p&gt;</code> element. I will try to create a fiddle that creates the elements with d3.</p>