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:
2 answers
solution1
5 2013-02-23 08:02:16
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.
solution2
1 2013-02-24 06:55:24
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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.