Atomix Atomix - 5 months ago 33
HTML Question

SVG foreignObject contents do not display unless plain text

I am trying to output HTML using the foreignObject tag inside an SVG drawing. I am using d3 to generate the elements. The only time the HTML content inside the foreignObject tag shows up is when the content inside the foreignObect tag is plain text, otherwise it just shows up as empty/blank. Please see this jsfiddle for an example of my problem: http://jsfiddle.net/R9e3Y/29/

The contents inside the foreignObject tag show up on inspecting the element this this:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<foreignObject x="40" y="40" width="100" height="100">
<div>test</div>
</foreignObject>
</svg>


but are not visible on the screen? How do I get the content to show up?

Answer

Since you're using d3 you need to tell d3 that the div is a html div and not some element in the svg namespace. Try

.append("xhtml:div")