复制代码
代码如下:<div id="svgContainer">
<svg id="svg"></svg>
</div>
首先需要获取svg标签以及内容：
var svgHtml = svgContainer.innerHTML();
将svg转成canvas需要用到google的一个插件canvg，可以上官网下载，也可以直接远程引用进来
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id，第二个自然就是svg标签内容了，就这样，svg转成了canvas
然后就是将canvas转成图片了，这个更加简单了
var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");//这其实是将canvas转成了图片，并返回图片的所有内容数据，如下即可显示图片：
复制代码
代码如下:<img src=imgSrc />
这就是从svg->canvas->image的实现方法了，这个还是很有用的，因为不同的浏览器对svg和canvas的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！