使用foreignObject通过D3js动态添加SVG [英] using foreignObject to add SVG dynamically using D3js
问题描述
工作
<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>
不起作用
我正在尝试使用d3js动态添加相同的内容.但这只是添加DOM元素结构，而不是加载SVG图片.
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");
xhtml:之后的前缀也相同.我不知道为什么对象"标签没有加载SVG图像. 请检查以下SC:
After xhtml: prefix also same. I don't know why that 'object' tag is not loading SVG image. Please check the following SC:
推荐答案
您需要在外部html元素前面加上xhtml:前缀，以便d3在xhtml命名空间中创建它.因此，例如，append("body")可以正确地写为append("xhtml:body").
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元素从其父级获取默认名称空间，因此，如果您编写xhtml:body，则内部div可以写为"div"或"xhtml:div"
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"
您还已经将ForeignObject拼写为foreignOject.
You've also misspelled foreignObject as foreignOject.
这篇关于使用foreignObject通过D3js动态添加SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
