使用foreignObject使用D3js动态添加SVG
aWe*_*r09 3 javascript svg d3.js
工作的
<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图像.
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之后:前缀也一样.我不知道为什么'object'标签没有加载SVG图像.请检查以下SC:
你需要在外部html元素前加上xhtml:所以d3在xhtml命名空间中创建它.因此,append("body")被正确写为append("xhtml:body").
d3元素从其父级获取默认命名空间,因此如果您编写xhtml:body,则内部div可以写为"div"或"xhtml:div"
您还将foreignObject错误拼写为foreignOject.
| 归档时间： |
|
| 查看次数： |
3417 次 |
| 最近记录： |