Javascript 如何在画布中呈现SVG的一部分？

核心问题：

目标是将SVG的一部分呈现为网页上固定大小的画布元素

我尝试的解决方案：

鉴于这似乎是在画布中渲染SVG图像的最直接的方法，我想我可以在CanVG渲染之前利用该属性来裁剪图像。在这一点上我遇到了麻烦

问题：

---

如果提供了SVG图像，如何将该图像的一部分呈现给画布元素？

这正是您遇到的问题所在？ context.drawImage函数内置了一个很好的裁剪功能。与标准的3个参数（图像对象、x位置、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，但是，只要您可以将图像对象传递给函数drawImage（），就可以按照代码中提到的那样裁剪它

创建屏幕外画布，并使用以下方式渲染：

---

编辑：但是，如果您可以访问SVG源代码（直接在JS中或通过XMLHTTP请求），并且可以在渲染之前修改

viewBox

属性，则无需执行上述操作。查看哪个显示直接渲染到一个画布的SVG文件，然后更改

viewBox

属性并将剪裁区域渲染到另一个画布。

将整个SVG渲染到一个画布，然后将该画布的一部分渲染到另一个画布，这是不可接受的吗，但是，一个隐藏的图像也能做到这一点吗？不过，使用

viewBox

听起来确实是一个很好的方法。可能CanVG没有正确地支持它，或者您只是做错了什么。你有没有一个例子来说明你用这个做了什么以及它是如何失败的？

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

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