RaphaelJS到SVG来

Question

我试图让用户下载SVG图形作为PNG.您可以通过JSFIDDLE访问代码

SVG到CANVAS部分无法正常工作.

已经添加了canvg和Mozillas的代码,它们都没有工作.还添加了Canvas2Image,如果canvas有元素,它应该有效.

Answer 1

感谢开发canvg的gabelerner帮助我修复了它

\n\n

\n
1. 基于将Raphael JS 在画布中生成的 SVG 保存为 png 时遇到的问题，去掉 svg 中标签之间的所有空格
\n
2. 基于将Raphael JS 在画布图像中生成的 SVG 保存为 png 时遇到的问题，其 href 更改为 xlink:href
\n
3. 基于gabelerner，添加 xmlns:xlink="http://www.w3.org/1999/xlink" 到 svg xlmns
\n
4. 基于 gabelerner，图像必须在同一域下 - 无交叉
\n
5. 基于gabelerner，Canvas2Image无法在框架内工作，这意味着没有FIDDLE（因此我删除了FIDDLE部分以使其清楚）
\n

\n\n

这是您可能想要的示例 SVG 和 JS 部分

\n\n

var svg_XML_NoSpace = \'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="768"><desc>Created with Rapha\xc3\xabl</desc><defs></defs><image x="0" y="0" width="1024" height="768" preserveaspectratio="none" xlink:href="http://<mydomain>/<myfolder>/<myfile>"></image><path fill="none" stroke="#ff0000" d="M414,114L722,114" style="stroke-width: 3px;" stroke-width="3"></path></svg>\'; //based on gabelerner\n\n//add canvas into body        \nvar canvasID = "myCanvas";\nvar canvas = document.createElement(\'canvas\');\ncanvas.id = canvasID;\ndocument.body.appendChild(canvas);\n\n//convert svg to canvas\ncanvg(document.getElementById(canvasID), svg_XML_NoSpace, { \n    ignoreMouse: true, ignoreAnimation: true, \n    renderCallback: function () {\n         //save canvas as image\n         Canvas2Image.saveAsPNG(document.getElementById(canvasID));  \n         }\n} );\n

\n