Q:

using foreignObject to add SVG dynamically using D3js

working

<g>
<foreignObject width="100%" height="100%">
<body>
<div style="width:4em;height:4em">
<object height="100%" width="100%" 
        data="icons/cloud.svg" type="image/svg+xml">

</object>
</div>
</body>
</foreignObject>
<text x="0" y="15" fill="red">I love SVG</text>
</g>

</svg>

Not working
I am trying to add the same thing dynamically using d3js. But it is simply adding DOM element structure, not loading SVG image.
d3.select("body").append("svg")
.append("foreignOject").attr("height","100%").attr("width","100%")
.append("body")
.append("div").style("width","4em").style("height","4em")
.append("object").attr("height","100%").attr("width","100%")
.attr("data","icons/cloud.svg").attr("type","image/svg+xml");

After xhtml: prefix also same. I don't know why that 'object' tag is not loading SVG image.
Please check the following SC:

A:

You need to prefix the outer html element with xhtml: so that d3 creates it in the xhtml namespace. So append("body") is correctly written as append("xhtml:body") for instance.
d3 Elements take a default namespace from their parent so if you write xhtml:body, the inner div can be written either as "div" or as "xhtml:div"
You've also misspelled foreignObject as foreignOject.

