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

Question

核心问题:

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

我尝试的解决方案:

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

问题:

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

Answer 1

您遇到的问题到底是什么？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()，您就可以按照代码中所述裁剪它。