Javascript 如何将位图嵌入到D3js生成的SVG代码中？

如果能够访问合适的topojson和位图，我将使用topojson文件通过D3js生成SVG viz。然后，我通过以下方式向其添加位图：

// Append bitmap
    svg.append("image")
      .attr("xlink:href", "./myimage.png")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bg");

但这实际上只是添加了一个指向图像的链接。另外，当我选择dataviz DOM并将其保存为SVG时，我没有位图二进制文件，只有位图的链接

是否可能，以及如何通过D3js或javascript将我的.png二进制文件真正嵌入到我的SVG DOM中？

---

另请参见：，您可以在此处尝试下载SVG。

此示例演示如何将图像绘制到画布元素，并使用

.toDataURL

函数将此画布的快照获取为字符串，然后将其用作

xlink:href

属性：

---

您是否尝试过将PNG绘制到画布并通过将其作为数据绑定到svg:image元素来保存dataURI？可能与我让它工作但生成画布有关，然后它的快照会给我的工作流带来新的麻烦。我有一些提示，加载文件，并通过

atob（）

将字符串转换为base 64可能更直接。你可能是对的，我相信有更有效的方法，但这是我唯一有经验的方法。