CODEWITHSUNDEEP
javascriptsvgd3.js
aWebdesigner09
aWebdesigner09

Reputation: 257

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: enter image description here

Upvotes: 3

Views: 4237

Answers (2)

Robert Longson
Robert Longson

Reputation: 124016

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.

Upvotes: 5

aWebdesigner09
aWebdesigner09

Reputation: 257

fixed by adding a fallback 'img' tag for 'object' tag, as shown below:

var svg = d3.select('body').append('svg');
svg.append('foreignObject')
  .attr('width', '100%')
  .attr('height', '100%')
  .attr('x', 0) 
 .append('xhtml:div').style('height','1100px').style('width','1100px')
.append('xhtml:object')
.attr('height','100%').attr('width','100%')
.attr('type','image/svg+xml')
.attr('data','http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg')
.append('img').attr('alt','notloaded');

Upvotes: 1

Related Questions