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

Question

如果可以访问合适的 topojson 和位图，我使用 topoJSON 文件通过 D3js 生成 SVG 可视化。然后我通过以下方式向其附加位图:

// 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 中？

另请参阅:https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html ，您可以在其中尝试下载 SVG。

Answer 1

此示例显示如何将图像绘制到 Canvas 元素并使用 .toDataURL 函数将此 Canvas 的快照转换为字符串，然后您可以将其用作 xlink: href 属性:

http://bl.ocks.org/emeeks/707681f1f5b4a2063d6e