如何在单个html页面中将多个svg转换为png？

Question

我使用 d3 和 venn.js 创建了这个维恩图。

代码在这里：Svg 实际上是由这些脚本在 div venn2 中创建的。

    <div id="venn2"></div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="js/venn.js"></script>
    <script>
    var sets = [
        {sets:["A"], size: 12, label: "A"},
        {sets:["B"], size:12, label: "B"},
        {sets: ["A", "B"], size: 4, label: "AB"}
    ];

    var chart = venn.VennDiagram()
    .wrap(false)
    .fontSize("14px")
    .width(400)
    .height(400);

    function updateVenn(sets) {
        var div = d3.select("#venn2").datum(sets);
        var layout = chart(div),
        textCentres = layout.textCentres;
        div.selectAll(".label").style("fill", "white");
        div.selectAll(".venn-circle path").style("fill-opacity", .6);
        return layout;
    }
    </script>

我得到的脚本here 通过画布将 svg 转换为 png。

    <canvas id="canvas" ></canvas>
    <div id="png-container" ></div>

    <script>
    var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        var png = canvas.toDataURL("image/png");
        document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
        DOMURL.revokeObjectURL(png);    
    };
    img.src = url;
    </script>

因此，作为 svg 的维恩图是由脚本 1 在 venn2 div 中创建的，然后 svg 由脚本 2 编写为 png。 对于每页一张 svg 图像，它工作得非常好。
当我在单个 html 页面上有多个这样的 svg venn 图时。只有第一个被转换为 png。
但我无法获取位置 2 和 3 或更多位置的 svg 以转换为 png。 我被这个代码卡住了

var svgString = new XMLSerializer().serializeToString(querySelectorAll('svg'));

其中“svg”仅表示我猜的第一个 svg，但不是以后。 我什至无法创建具有不同“id”的 svg，因为 svg 是由 d3 和 venn.js 脚本形成的。

问题是：如何转换 html 页面中的所有 svg 图像 当我不知道他们的 id 通过上面的代码来 png 图像时？
我不知道如何解析整个字符串 var svgString 以将所有字符串转换为不同的 png 图像？

Answer 1

万一有人来找示例代码，我想办法如下。

我的情况：我有一个 svg，有两个图层，由 plotly 绘制。我只得到了像 OP 这样的第一层。用 id="chart" 绘制到一个元素中。已经使用 id="layer0" 创建了一个新画布。

最终我需要以 dataURL 的形式发回 PHP，所以：

  var nodes = document.getElementById("chart").querySelectorAll('svg');
  for (var i = 0; i < nodes.length; i++) {
    result = new XMLSerializer().serializeToString(nodes[i]);
    eval('layer'+[i]+'chart').src = 'data:image/svg+xml;base64,' + btoa(result);
  }

  elem0 = document.getElementById("layer0");
  ctx0 = elem0.getContext("2d");

  layer0chart.onload = function() {
    ctx0.drawImage(layer0chart,0,0,w*1.5,h*1.5);
    ctx0.drawImage(layer1chart,0,0,w*1.5,h*1.5);
    canvasdata = elem0.toDataURL();
    console.log(canvasdata);

  }

感谢@BioDeveloper 和@RobertLongson 的帮助。对我来说，关键是最终还要确保在加载图像时调用 toDataURL。干杯。