svg - グラフを svg (d3.js) から jpg にエクスポートすると黒い領域が表示される

Question

javascriptを使用してSVG(d3.jsで取得)からJPG画像にグラフをエクスポートしようとしています。

実際のところ、最終的な画像では画像が正しく表示されませんが、グラフの線を囲む黒い領域が描画されます。これが2つの画像です。ページの上部に SVG が表示され、最終的な JPG 画像が表示されます。

私が書いたコードは次のとおりです。

    root_node = d3.select("svg")
      .attr("version", 1.1)
      .attr("xmlns", "http://www.w3.org/2000/svg")
      .node();

    s_xml = (new XMLSerializer).serializeToString(root_node);

    var imgsrc = 'data:image/svg+xml,'+ s_xml;
    var img = '<img src="'+imgsrc+'">';

    var canvas = document.createElement("canvas");

    canvas.width = 1600;
    canvas.height = 600;

    context = canvas.getContext("2d");

    var image = new Image;
    image.src = imgsrc;
    image.onload = function() {
        context.drawImage(image, 0, 0);
        context.fillStyle = 'white';
        context.globalCompositeOperation = "destination-over";
        context.fillRect(0, 0, canvas.width, canvas.height);

        var canvasdata = canvas.toDataURL("image/jpeg");
        var jpgimg = '<img src="'+canvasdata+'">';
        d3.select("body").append("svgdataurl").html(jpgimg);

    });

間違った色の変換の理由を知っている人はいますか? 前もって感謝します！