d3 附加带有 svg 扩展名的图像答案

【问题标题】：d3 append an image with svg extensiond3 附加带有 svg 扩展名的图像
【发布时间】：2013-02-20 03:59:47
【问题描述】：

我正在尝试将带有“.svg”扩展名的 svg 图像添加到我的图表（使用 d3 创建的另一个 svg 图像）。

这是代码：

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);

如您所见，我正在设置“xlink:href”属性，但 d3 在浏览器中将其更改为 href：

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

事实上，如果我使用 png 扩展名，这段代码就可以完美运行。有什么想法吗？

【问题讨论】：

我也有这个问题。显然，如果前缀是已知的命名空间，D3 会删除前缀。这里有更多关于命名空间的细节：github.com/mbostock/d3/wiki/Namespaces
只要使用setAttributeNS 添加属性，它在所有浏览器中都可以正常工作（并且要明确的是，D3 会这样做）。如果您希望以特定方式完成文档/元素序列化，则属性本身缺少前缀实际上只是一个问题。
看起来这仍然是今天的事情......到目前为止有人找到解决方案吗？

标签： javascript image svg d3.js xlink

【解决方案1】：

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

http://jsfiddle.net/am8ZB/

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

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

【讨论】：

是否可以将 svg 实现到 DOM 中？
什么是#chart1？