对于内联 SVG，您需要：

• 将 SVG 字符串转换为 Blob
• 获取 Blob 的 URL
• 创建一个图像元素并将 URL 设置为 src
• 加载 ( onload) 后，您可以将 SVG 绘制为画布上的图像
• 用于toDataURL()从画布中获取 PNG 文件。

例如：

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;

    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };

    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG data-uri
});

当然，这里的console.log 只是举例。在这里存储/传输字符串。（我还建议onerror在方法中添加一个处理程序）。

还要记住使用width和height属性设置画布大小，或使用属性从 JavaScript 设置。

自从这个问题提出其他一些问题以来，我很久之后才来，因为接受的答案可能会产生不良行为。

@K3N 解决方案几乎是正确的，但我会反对使用svgElement.outerHTML.
相反，人们应该更喜欢new XMLSerializer().serializeToString(svgElement).

此外，blob 和 URL API 的使用不是必需的，简单的 dataURI 具有更多的跨浏览器兼容性。

所以一个完整的版本是：

function drawInlineSVG(svgElement, ctx, callback) {
  var svgURL = new XMLSerializer().serializeToString(svgElement);
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(this, 0, 0);
    callback();
  }
  img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
}

// usage:
drawInlineSVG(document.querySelector('svg'), ctxt, function() {
  console.log(canvas.toDataURL())
});