如何在 Canvas 中渲染 SVG 的一部分？

Question

核心問題：

目標是將 SVG 的一部分呈現為 web 頁面上固定大小的 Canvas 元素。

我嘗試的解決方案：

鑒於CanVG似乎是在 Canvas 中渲染 SVG 圖像的最直接方式，我想我可以利用viewBox屬性在 CanVG 渲染之前裁剪圖像。 我在這一點上遇到了麻煩。

問題：

提供一張 SVG 圖像，如何將該圖像的一部分渲染為 Canvas 元素？

Answer 1

1. 創建一個屏幕外的 canvas 並使用CanVG渲染它：

    var full = document.createElement('canvas'); full.width=800; full.height=600; canvg(full, '<svg>…</svg>');

2. 使用drawImage將此 canvas-as-image 的一部分復制到另一個 canvas 上的區域（有關參數詳細信息，請參見鏈接）：

    var ctx = myVisibleCanvas.getContext('2d'); ctx.drawImage(full,10,20,80,60,92,16,80,60);

編輯：但是，如果您有權訪問 SVG 源（直接在 JS 中或通過 XMLHTTP 請求）並且可以在呈現之前修改viewBox屬性，則以上內容不是必需的。 請參閱此演示，它顯示了一個 SVG 文件直接渲染到一個 canvas，然后更改viewBox屬性並將剪輯區域渲染到另一個 canvas。

Answer 2

您遇到的問題到底是什么？ context.drawImage function 有一個很好的內置裁剪功能。而不是標准的 3 個參數（圖像 object，x position，y 位置）你只需傳遞給它 9 個參數，它就會裁剪圖像。 這些是參數：

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，但只要您可以將圖像 object 傳遞給 function drawImage()，您就可以按照代碼中的說明裁剪它。