So speichern Sie eine SVG generiert von Raphael

Question

Gibt es eine Möglichkeit, die von Raphael als SVG-Datei generierten SVG zu speichern. Beachten Sie, dass Sie nur in Chrome arbeiten müssen.

Answer 1

Als stef commented ist die BlobBuilder-API veraltet. Stattdessen use the Blob API.

Aufbauend auf Andreas' answer, hier ist, wie ich es schnell zu arbeiten hätte:

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

Ich habe eine Lösung mit Raphael.Export, die mir eine gültige svg/xml String (etwas, das ich nicht von der einfach aus dem innerHTML des DOM-Objekts, das die svg enthält) und Blobbuilder erhalten, um eine zu erstellen URL für einen Link, der am Ende ein Klick-Ereignis auslöst, um die Datei zu speichern.

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

Wenn Sie den Rapahel.Export nicht verwenden möchten, können Sie direkt das svg vom Dom bekommen, wie das :

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

"Halter" ist die ID des div wo Raphael geladen wird: r = Raphael ("Halter"); Bitte beachte, dass ich denke, es wird nicht auf alten Browser arbeiten, die nicht svg nicht behandeln

Answer 4

Für den Teil, wo Sie den Blob zu speichern, würde ich https://github.com/eligrey/FileSaver.js/

oder https://www.npmjs.com/package/angular-file-saver empfehlen, wenn Sie AngularJS verwenden