Question

核心问题：

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

我尝试的解决方案：

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

问题：

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

Answer 1

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

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

使用drawImage将此canvas-as-image的一部分复制到另一个画布上的某个区域（参见参数详情链接）：
```
var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,80,60);
```

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

Answer 2

你到底遇到了什么问题？ context.drawImage函数内置了一个很好的裁剪功能。你只需要传递9个参数而不是标准的3个参数（图像对象，x位置，y位置），它将裁剪图像。这些是参数：

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的一部分？

2 个答案: