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>
不工作
我正在尝试使用 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");
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") 。
d3 元素从其父元素获取默认命名空间，因此如果您编写 xhtml:body，则内部 div 可以写为“div”或“xhtml:div”
您还将foreignObject 错误地拼写为foreignOject。