如何将位图嵌入到D3js生​​成的SVG代码中? [英] How to embed bitmap into D3js generated SVG code?

问题描述

允许访问合适的topojson和位图，我使用topoJSON文件通过D3js生​​成SVG viz.然后，我通过:

Given access to suitable topojson and bitmaps, I use the topoJSON file to generate a SVG viz via D3js. Then I append a bitmap to it via :

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

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

But this actually just add a link toward the image. Also, when I select the dataviz DOM, and save it as SVG, I don't have the bitmap binary, but just the bitmap's link.

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

另请参见: https://rugger-demast.codio. io/front/_location_map-en-wikiatlas.html ，您可以在此处尝试下载SVG.

See also: https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html , where you can try to download the SVG.

推荐答案

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

This example shows how to draw an image to a canvas element and use the .toDataURL function to get a snapshot of this canvas into a string that you can then use as the xlink:href attribute:

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

这篇关于如何将位图嵌入到D3js生​​成的SVG代码中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！