如何解决RaphaelJS到SVG到
| 我正在尝试让用户将SVG图形下载为PNG。 您可以通过JSFIDDLE到达代码 SVG到CANVAS的部分无效。 已经添加了canvg和Mozillas的代码,它们都不起作用。还添加了Canvas2Image,如果canvas具有元素,它应该可以工作。解决方法
感谢gabelerner谁开发了canvg帮助我修复了它
基于问题,将Raphael JS生成的SVG在画布中另存为png,在svg中剥离标签之间的所有空格
基于将在画布图像的href中将Raphael JS生成的SVG保存为png的问题更改为xlink:href
基于gabelerner,将xmlns:xlink = \“ http://www.w3.org/1999/xlink \”添加到svg xlmns中
基于gabelerner,图片必须位于相同的域下-不能有任何交叉
基于gabelerner,Canvas2Image无法在框架内工作,这意味着没有FIDDLE(因此我删除了FIDDLE部分以使其清晰可见)
这是您可能想要的示例SVG和JS部分
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ël</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
//add canvas into body
var canvasID = \"myCanvas\";
var canvas = document.createElement(\'canvas\');
canvas.id = canvasID;
document.body.appendChild(canvas);
//convert svg to canvas
canvg(document.getElementById(canvasID),svg_XML_NoSpace,{
ignoreMouse: true,ignoreAnimation: true,renderCallback: function () {
//save canvas as image
Canvas2Image.saveAsPNG(document.getElementById(canvasID));
}
} );
, 尝试使用fabric.js将SVG转换为画布(这是一个演示,当您单击侧边栏中的按钮时,其中svg实时转换为画布)。
Fabric不支持SVG的所有功能,但可以在简单情况下使用。
这是使用loadSVGFromURL
的示例。
1)您需要具有版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。