javascript - 将修改后的 SVG 绘制到 Canvas 上

Question

我想加载一个 SVG 图像，对其 .contentDocument 进行一些操作, 然后将其绘制到 Canvas 上。

此处是将 SVG 绘制到 Canvas 的一个很好的示例:http://www.phrogz.net/tmp/canvas_from_svg.html

但在此示例中，svg 创建为 new Image('url.svg')目的。当您以这种方式创建 SVG 时，不幸的是它似乎没有要操作的 contentDocument。当您将其创建为 <object> 时，它似乎只有一个。元素。

但是当我将 SVG 创建为对象时，获取 SVG 的 DOM 节点并将其传递给 context.drawImage(svgNode, x, y) , 它抛出错误 "Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement." (在 Firefox 上)。

似乎我要么必须找到一种方法将对象 SVG 转换为 HTMLImageElement，要么找到一种方法来获取作为图像加载的 SVG 的内容文档。有谁知道该怎么做？还是有第三种我想念的方法？

Answer 1

我成功了。诀窍是:

1. 使用 XMLHttpRequest() 将 SVG 作为 XML 文档加载
2. 操纵该 XML 文档
3. 将XML文档转换为字符串
4. 从该字符串创建一个 ObjectURL
5. 使用该 ObjectURL 创建图像
6. 将该图像复制到 Canvas

这是我的源代码:

编辑:不幸的是它只适用于 Firefox 和 Chrome。它在 IE9 中失败，因为不支持 XMLSerializer()(它也不支持 XML 文档上的 getElementById，但有解决方法)并且在 Opera 中失败，因为不支持 createObjectUrl。

var xhr = new XMLHttpRequest();
xhr.onload = function() {
    // get the XML tree of the SVG
    var svgAsXml = xhr.responseXML;
    // do some modifications to the XML tree
    var element = svgAsXml.getElementById('hat');
    element.style.fill = '#ffff00';
    // convert the XML tree to a string
    var svgAsString = new XMLSerializer().serializeToString(svgAsXml);
    // create a new image with the svg string as an ObjectUrl
    var svgBlob = new Blob([svgAsString], {type: "image/svg+xml;charset=utf-8"});
    var url = window.URL.createObjectURL(svgBlob);
    var img = new Image();
    img.src = url;
    // copy it to the canvas
    img.onload = function() {
        var theCanvas = document.getElementById('theCanvas');
        var context = theCanvas.getContext('2d');
        context.drawImage(img, 0, 0);
        window.URL.revokeObjectURL(svgBlob);
    }
}
xhr.open("GET", "test.svg");
xhr.responseType = "document";
xhr.send();