canvg 不适用于已放置在正文中的 svg？

Question

我想将我的 SVG 转换为 CANVAS，然后将其保存为图像。我已经在我的页面中由 javascript 生成了 svg。我使用此代码：

$("#menu-save-image").click(function () {
    var svg = document.getElementsByTagName('svg');
    var canvas = document.getElementById("test");
    canvg(canvas, svg);

    // or second way
    var c = document.getElementById('test');
    var ctx = c.getContext('2d');
    ctx.drawSvg(svg, 0, 0, 500, 500);


});

两种方法都行不通。为什么？

Answer 1

canvg 方法需要 SVG 源字符串（或 url 或 XMLDocument），因此您应该像这样使用 XMLSerializer 将 svg 元素转换为 svg 源。

var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById("test");
canvg(canvas, svgString);

见https://code.google.com/p/canvg/source/browse/trunk/canvg.js