Question

工作

<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： enter image description here

Answer 1

您需要在外部html元素前加上xhtml：以便d3在xhtml命名空间中创建它。因此，附加（“body”）被正确写为append（“xhtml：body”）。

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

您还将foreignObject错误拼写为foreignOject。

Answer 2

通过为'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');

使用foreignObject使用D3js动态添加SVG

2 个答案: