如何使用html2canvas呈现HTML元素和SVG

Question

如何使用html2canvas呈现HTML元素和SVG？它不起作用。

我的代码：

$(function() {
  window.takeScreenShot = function() {
    html2canvas($('#centerpanel'), {
      onrendered: function(canvas) {
        var svg = document.getElementById("centerpanel");
        var serializer = new XMLSerializer();
        var ser = serializer.serializeToString(svg);
        var context = canvas.getContext('2d');

        context.fillStyle = '#8cb4cd';
        context.font = '200px sans-serif';
        context.globalCompositeOperation = 'lighter';
        x = 150;
        y = 100;
        context.translate(x, y);
        context.rotate(-Math.PI / 4.5);
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.fillText('123456', 300, 480);
        context.restore();

        var base64image = canvas.toDataURL("image/png");
        console.log(base64image);
        var image = new Image();
        image.src = base64image;

        var w = window.open("");
        w.document.write(image.outerHTML + ser);
      },
    });
  }
});

上面的代码同时显示了HTML和SVG，但是结果无效，如图1所示。但是我希望结果如图2所示。

如何编辑代码以显示所需的效果？

图1 图2