javascript - d3 append an image with svg extension

Question

I'm trying to add an svg image with '.svg' extension to my chart (another svg image created with d3).

This is the code:

d3.select("#chart1 svg")
  .append("svg:image")
  .attr("xlink:href", "img/icons/sun.svg")
  .attr("width", 40)
  .attr("height", 40)
  .attr("x", 228)
  .attr("y",53);

As you can see I'm setting "xlink:href" attribute, but d3 changes this to href in the browser:

<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image>

In fact, this code works perfectly if I use png extension. Any idea?

Answer 1

代码应该按原样工作 - 在这里您可以看到将 .svg 文件附加到 d3 的示例：

http://jsfiddle.net/am8ZB/

不要忘记图片可能确实存在但您看不到它 - 您应该使用浏览器开发人员工具检查页面以查看图片是否已放置在视图区域之外（由于您的 x/ y 值，例如）。

#chart1在这种情况下，更多信息会有所帮助。