javascript – 如何在画布中渲染SVG的一部分？

核心问题：

目标是将SVG的一部分呈现给网页上的固定大小的Canvas元素.

我尝试的解决方案：

看起来像CanVG似乎是在Canvas中渲染SVG图像最直接的方式我认为我可以利用viewBox属性在CanVG渲染之前裁剪图像.我在这一点上遇到了麻烦.

问题：

提供了一个SVG图像,如何将该图像的一部分呈现给Canvas元素？

最佳答案

>创建一个屏幕外画布并使用CanVG渲染它：

var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full,'

>使用drawImage将此canvas-as-image的一部分复制到另一个画布上的区域(请参阅参数详细信息的链接)：

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

编辑：但是,如果您可以访问SVG源(直接在JS中或通过XMLHTTP请求),则无需执行上述操作,并且可以在呈现之前修改viewBox属性.请参见this demo,其中显示直接呈现到一个画布的SVG文件,然后更改viewBox属性并将剪切的区域呈现到另一个画布.