17
C'è un modo per salvare l'SVG generato da raphael come un file svg. Nota che è necessario lavorare solo in chrome.Come salvare un file SVG generato da raphael
A
risposta
7
Come stef commented, l'API BlobBuilder è obsoleta. Invece, use the Blob API.
Sulla Andreas' answer, ecco come ho subito capito di lavorare:
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();
14
Mi è venuta una soluzione utilizzando Raphael.Export, che mi fornisce una stringa svg/xml valida (qualcosa che non ho potuto ottenere semplicemente dall'internoHTML dell'oggetto DOM che contiene lo svg) e Blobbuilder per creare un url per un collegamento che attiverò un evento click alla fine per salvare il file.
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();
+0
Sembra che BlobBuilder sia obsoleto. Blob sembra essere la sostituzione ma non ha alcun metodo di aggiunta. – stef
+0
La risposta di Neema ha la soluzione attuale. –
1
Se non si desidera utilizzare il Rapahel.Export, è possibile ottenere direttamente la svg dal Dom, come quello :
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();
"titolare" è l'id del div in cui è caricato Raphael: r = Raphael ("supporto"); Nota che penso che non funzionerà su vecchi browser che non gestisce svg
0
Per la parte in cui si salva il blob, io consiglierei di https://github.com/eligrey/FileSaver.js/
o https://www.npmjs.com/package/angular-file-saver se si sta utilizzando AngularJs
Suppongo che intendi salvare alla fine del client? Ci deve essere un modo migliore di questo, ma nel peggiore dei casi, si può prendere l'XML con JavaScript/jQuery, inviarlo al server tramite AJAX, e poi servirlo all'utente tramite la solita struttura web con le intestazioni appropriate impostate. – halfer
Ah, un altro modo: puoi codificare un file SVG come una stringa base64, quindi aggiungerlo a un collegamento 'data:'. L'utente può fare clic per visualizzarlo e utilizzare 'Salva' nel proprio browser. – halfer