canvas 要素に SVG 画像を描画しようとしています。私が見つけたいくつかの情報源は、特別なライブラリを使用して SVG データをストロークに変換する必要があることを示唆していますが、他の情報源は、キャンバス上で SVG 画像を呼び出して描画する<canvas>
だけでよいと言っています。drawImage()
最初に、canvg
ライブラリを使用してキャンバスに SVG を描画しましたが、機能が豊富すぎて、単純なニーズに対して重すぎると考えました。ただし、単純なdrawImage
呼び出しを使用しても、私のアプリケーションでは機能しないようです。何も表示されません。SVG のリソース URL を PNG 画像に切り替えると、問題なく表示されます。なにが問題ですか?何か間違ったことをしている可能性がありますか、それともキャンバスでの SVG の描画はこの方法ではサポートされていませんか?
Chrome 21、22-canary、および Opera でこれを試しました。
私のコード(CoffeeScript内):
ctx = @canvas.getContext '2d'
ctx.clearRect 0, 0, @canvas.width, @canvas.height
ctx.drawImg @image, 0, 0, @canvas.width, @canvas.height
@image
SVG ではなく、PNG を指している場合に機能します。