[解決済み] D3.jsでSVGを作成した後、SVGファイルを保存/エクスポートするにはどうすればよいですか（IE、safari、chrome）？

質問

現在、D3を使ってウェブサイトを作っていますが、ユーザーがSVGをSVGファイルとして保存するオプションを持ちたいと思っています。私はこれを行うためにcrowbar.jsを使用していますが、それはクローム上でのみ動作します。サファリでは何も起きず、IEでは click() メソッドを使用してファイルをダウンロードします。

var e = document.createElement('script'); 

if (window.location.protocol === 'https:') { 
    e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); 
} else { 
    e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); 
}

e.setAttribute('class', 'svg-crowbar'); 
document.body.appendChild(e);

safari、IE、chromeで自分のホームページのSVG要素に基づいてSVGファイルをダウンロードするにはどうすればよいですか？

どのように解決するのですか？

5つのステップがあります。私はインラインsvgを出力する際によくこの方法を使用します。

1. 出力するインラインsvgの要素を取得する。
2. XMLSerializerでsvgのソースを取得する。
3. svgとxlinkの名前空間を追加する。
4. encodeURIComponentメソッドでsvgのurlデータスキームを構築する。
5. このurlをquot;a"要素のhref属性に設定し、このリンクを右クリックして、svgファイルをダウンロードします。

//get svg element.
var svg = document.getElementById("svg");

//get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);

//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}

//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);

//set url value to a element's href attribute.
document.getElementById("link").href = url;
//you can download svg file by right click menu.