Как сохранить svg, сгенерированный raphael

Question

Есть ли способ сохранить SVG, сгенерированный raphael как svg-файл. Обратите внимание, что нужно работать только в хроме.

Answer 1

Как stef commented, API BlobBuilder устарел. Вместо этого, 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 (что-то, что я не мог получить от простого из innerHTML объекта DOM, содержащего svg) и Blobbuilder, чтобы создать url для ссылки, в которой я должен запустить событие click в конце, чтобы сохранить файл.

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, вы можете сразу получить от 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, где загружен Рафаэль: г = Рафаэль ("держатель"); Обратите внимание, что я думаю, что это не будет работать на старом браузере, который не обрабатывает SVG

Answer 4

Для той части, где вы сохраните блоб, я бы рекомендовал https://github.com/eligrey/FileSaver.js/

или https://www.npmjs.com/package/angular-file-saver, если вы используете AngularJs