工作

<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:之后的前缀也一样。我不知道为什么“对象”标签没有加载SVG图像。
请检查以下SC:

最佳答案

您需要在外部html元素前面加上xhtml:前缀,以便d3在xhtml命名空间中创建它。因此,例如,append(“body”)被正确地编写为append(“xhtml:body”)。

d3元素从其父级获取默认 namespace ,因此,如果您编写xhtml:body,则内部div可以写为“div”或“xhtml:div”

您还已经将foreignObject拼写为foreignOject。

10-05 20:33
查看更多