2

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

@imageSVG ではなく、PNG を指している場合に機能します。

4

0 に答える 0