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

Ответ 1

Как прокомментировал stef, API BlobBuilder устарел. Вместо этого использовать API-интерфейс Blob.

Основываясь на ответе Андреаса, вот как я быстро получил его на работу:

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();

Ответ 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();

Ответ 3

Если вы не хотите использовать Rapahel.Export, вы можете напрямую получить svg из dom, например:

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

Ответ 4

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

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