コア問題：SVGの一部をキャンバスにレンダリングする方法は？
目標は、Webページ上の固定サイズのキャンバス要素にSVGの部分をレンダリングすることです。
マイ未遂ソリューション：
が見CanVGをキャンバスにSVG画像をレンダリングするための最も直接的な方法であると思わように私は私が前CanVGのレンダリングに画像をトリミングするviewBox属性を活用することができ考え出し。私はこの点で問題を抱えてきました。
質問：SVG画像を提供
、どのようにしてキャンバス要素にその画像の部分をレンダリングすることができますか？
正確に問題はありますか？ context.drawImage関数には素晴らしいクロッピング機能が組み込まれています。標準の3つのパラメータ（イメージオブジェクト、x位置、y位置）の代わりに、9つのパラメータを渡すだけでイメージをトリミングします。これらのパラメータは、次のとおりです。これは、限り、あなたは、関数のdrawImage（に画像オブジェクトを渡すことができますよう、CanVGで動作しますが、場合
context.drawImage(
imageObject,
original image x crop position,
original image y crop position,
original image crop width,
original image crop height,
canvas image x crop position,
canvas image y crop position,
canvas image crop width,
canvas image crop height
)
は、私は考えている）で述べたように、あなたはそれをトリミングすることができるようになりますコード。
オフスクリーンキャンバスを作成し、CanVGを使用して、それにレンダリング：
var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full, '<svg>…</svg>');
コピーこのキャンバス-AS-画像drawImageを使用して別のキャンバス上の領域への部分を（パラメータの詳細については、リンクを参照してください）：
var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,80,60);
を編集します。ただし、SVGソース（JSまたはXMLHTTPリクエストのいずれか）にアクセスできる場合は上記の必要はなく、レンダリング前にviewBox属性を変更することができます。 1つのキャンバスに直接レンダリングされたSVGファイルを表示したthis demoを参照して、viewBox属性を変更し、クリップされた領域を別のキャンバスにレンダリングします。
SVG全体を1つのキャンバスにレンダリングし、そのキャンバスの一部を別のキャンバスに 'drawImage'するだけでは容認できませんか？ – Phrogz
この場合は容認できませんが、隠し画像でもそうすることができますか？それで目に見えるものではありません。 – akdom
'viewBox'を使うのは本当に良い方法ですね。おそらく、CanVGによって適切にサポートされていないか、おそらく何か間違っているだけかもしれません。あなたはこれで試したことと失敗したことを示す例がありますか？ – Phrogz