3

SVG 画像をロードし、その を操作し.contentDocumentてから、キャンバスに描画したいと考えています。

キャンバスに SVG を描画する良い例は次のとおりです: http://www.phrogz.net/tmp/canvas_from_svg.html

ただし、この例では、svg はnew Image('url.svg')オブジェクトとして作成されています。その方法で SVG を作成すると、残念ながら、操作する contentDocument がないようです。<object>要素として作成すると、1つしかないようです。

しかし、SVG をオブジェクトとして作成し、SVG の DOM ノードを取得して に渡すと、 (Firefox で)context.drawImage(svgNode, x, y)エラーがスローされます。"Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement."

object-SVG を HTMLImageElement に変換する方法、または画像として読み込まれた SVG のコンテンツ ドキュメントを取得する方法を見つける必要があるようです。どちらかを行う方法を知っている人はいますか？または、私が見逃している3番目の方法はありますか?

4

2 に答える 2

2

なんとかできました。秘訣は次のとおりです。

  1. XMLHttpRequest（）を使用してSVGをXMLドキュメントとしてロードします
  2. そのXMLドキュメントを操作する
  3. XMLドキュメントを文字列に変換します
  4. その文字列からObjectURLを作成します
  5. そのObjectURLで画像を作成する
  6. その画像をキャンバスにコピーします

それが私のソースコードです：

編集：残念ながら、FirefoxとChromeでのみ機能します。XMLSerializer（）がサポートされていないため（XMLドキュメントでgetElementByIdもサポートしていませんが、回避策があります）、IE9では失敗します。createObjectUrlがサポートされていないため、Operaでは失敗します。

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 に答える