17

raphaelによって生成されたSVGをsvgファイルとして保存する方法はありますか？Chromeでのみ機能する必要があることに注意してください。

4

5 に答える 5

14

Raphael.Exportを使用して解決策を考え出しました。これにより、有効なsvg / xml文字列（svgを保持するDOMオブジェクトのinnerHTMLからは取得できなかったもの）と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();
于 2012-04-18T20:51:09.427 に答える
7

stefがコメントしたように、BlobBuilderAPIは非推奨になりました。代わりに、BlobAPIを使用してください。

アンドレアスの答えに基づいて、これが私がすぐにそれを機能させる方法です：

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();
于 2013-09-06T21:40:23.333 に答える
1

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

" holder "は、ロードされるdivのIDです。Raphael：r = Raphael（ "holder"）; svgを処理しない古いブラウザでは動作しないと思うことに注意してください

于 2015-08-12T11:16:23.673 に答える
0

ブロブを保存する部分については、 https：//github.com/eligrey/FileSaver.js/をお勧めします

または、AngularJsを使用している場合は、 https： //www.npmjs.com/package/angular-file-saver

于 2015-12-01T18:00:40.683 に答える
0

少なくとも単純なケースでは、Raphaelプロットが書き込まれるdiv（通常は「canvas」）を使用して、そこからinnerhtmlをダウンロードできます。まず、divのコンテンツをコピーしてダウンロードリンクを作成するjavascript関数が必要です（この関数は別のページからのものであり、私の仕事ではありません）：

<script>
function downloadInnerHtml(filename, divId, mimeType) {
var elHtml = document.getElementById(divId).innerHTML;
console.log(elHtml); //useful for troubleshooting
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click(); 
}
</script>

次に、関数を実行するためにページ上にボタンが必要です

<button onclick="downloadInnerHtml('raphaelplot.svg', 'canvas','text/html')">save plot as svg</button>
于 2021-06-01T09:16:08.897 に答える