using foreignObject to add SVG dynamically using D3js

Question

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

Robert Longson · Accepted Answer · 2013-02-24 08:05:09Z

5

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.

edited Feb 24, 2013 at 8:05

answered Feb 23, 2013 at 8:02

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aWebdesigner09 Over a year ago

thanks for your reply. but, there is no change. please check the modified question once.

Robert Longson Over a year ago

Yes, there's another mistake I didn't spot first time. foreignOject is a typo.

aWebdesigner09 · Accepted Answer · 2013-02-24 06:55:24Z

1

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');

answered Feb 24, 2013 at 6:55

aWebdesigner09

2672 gold badges6 silver badges17 bronze badges

Collectives™ on Stack Overflow

using foreignObject to add SVG dynamically using D3js

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related