核心问题:
目标是将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属性并将剪切的区域呈现到另一个画布.