如何保存由raphael生成的svg

Question

有没有办法将raphael生成的SVG保存为svg文件。请注意，它只需要在chrome中工作。

Answer 1

由于stef commented，BlobBuilder API已被弃用。相反，use the Blob API。

大厦Andreas' answer，这里是如何我很快得到它的工作：

svgString = r.toSVG(); 
a = document.createElement('a'); 
a.download = 'mySvg.svg'; 
a.type = 'image/svg+xml'; 
blob = new Blob([svgString], {"type": "image/svg+xml"}); 
a.href = (window.URL || webkitURL).createObjectURL(blob); 
a.click(); 

Answer 2

我想出了一个解决方案，使用Raphael.Export，它给了我一个有效的svg/xml字符串（我无法从简单地从DOM对象的innerHTML获取svg）和Blobbuilder创建一个一个链接的URL，我将在最后触发一个点击事件来保存文件。

svgString = @paper.toSVG(); 
a = document.createElement('a'); 
a.download = 'mySvg.svg'; 
a.type = 'image/svg+xml'; 
bb = new(window.BlobBuilder || WebKitBlobBuilder); 
bb.append(svgString); 
blob = bb.getBlob('image/svg+xml'); 
a.href = (window.URL || webkitURL).createObjectURL(blob); 
a.click(); 

Answer 3

如果你不想使用Rapahel.Export，你可以直接从DOM得到SVG，像：

var svgString = document.getElementById('holder').innerHTML; 
a = document.createElement('a'); 
a.download = 'mySvg.svg'; 
a.type = 'image/svg+xml'; 
blob = new Blob([svgString], {"type": "image/svg+xml"}); 
a.href = (window.URL || webkitURL).createObjectURL(blob); 
a.click(); 

“支架” 是被装载其中div的ID圣拉斐尔：R =圣拉斐尔（ “支架”）; 注意，我认为它不会在旧的浏览器不处理SVG

Answer 4

对于您保存BLOB的一部分工作，我建议https://github.com/eligrey/FileSaver.js/

或https://www.npmjs.com/package/angular-file-saver如果你使用AngularJs