3

在职的 

<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： 在此处输入图像描述

4

2 回答 2

5

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

d3 元素从其父元素获取默认命名空间，因此如果您编写 xhtml:body，则内部 div 可以编写为“div”或“xhtml:div”

您还将 foreignObject 拼错为 foreignOject。

于 2013-02-23T08:02:16.767 回答
1

通过为“object”标签添加后备“img”标签来修复，如下所示：

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');
于 2013-02-24T06:55:24.250 回答