3

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

将 SVG 绘制到画布上的一个很好的例子是：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 的内容文档。有谁知道该怎么做？或者有没有我想念的第三种方法？

4

2 回答 2

2

我设法做到了。诀窍是：

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

那是我的源代码：

编辑：不幸的是，它只适用于 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();
于 2012-12-22T01:32:56.033 回答
1

将 svg 的 xml 内容转换为字符串数据，然后从中生成数据 uri。您应该能够将其加载为图像。像这样的东西：

new Image("data:image/svg+xml," + svgdata);

现在您应该可以将其绘制到画布上。

于 2012-12-20T12:47:11.213 回答