web-dev-qa-db-ja.com

JavaScriptで生成されたSVGをファイルに変換する

一部のデータを視覚化するためにd3.jsを使用しています。生成したSVGコードを取得して.svg画像ファイルとして保存できるようにしたい（Inkscape/Illustratorで編集するため）。

私は単にsvgタグの内容をコピーしようとしました。

<svg>
<!--snip-->
</svg>

image.svgというファイルに入れますが、これは2つの別個のCSSファイルにあるカラー/スタイリング情報を見逃しています。

私は この例 を使用しています。

これを行う簡単な方法はありますか？

javascriptcsssvgd3.js
37
Jason Sundram

SVG Crowbar がこれに対処する最良の方法かもしれないと思います。

ドキュメント

29
Jason Sundram

svg-crowbar.js を使用してサイトにボタンを提供し、ユーザーが視覚化をsvgとしてダウンロードできるようにするための良い方法を次に示します。

1）ボタンのCSSを定義します：

.download { 
  background: #333; 
  color: #FFF; 
  font-weight: 900; 
  border: 2px solid #B10000; 
  padding: 4px; 
  margin:4px;
}

2）ボタンのHTML/JSを定義します：

<i class="download" href="javascript:(function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.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); })();"><!--⤋--><big>⇩</big> Download</i>

同じJavaScriptを詳しく見てみましょう。

javascript:(function (){ 
    var e = document.createElement('script'); 
    if (window.location.protocol === 'https:') { 
        e.setAttribute('src', 'https://rawgit.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); 
})();

3）完了です。これにより、Inkscapeが開くことができるsvgダウンロードが生成されます。

注：svg-crowbar.jsは https://rawgit.com または http：/からロードされます/nytimes.github.com ;あなたはそれをあなたのウェブサイト/フォルダに統合することを好むかもしれません。

10
Hugolpz

これは遅いですが、D3.jsではCSSをインライン化するのは簡単です。あなたは次のようなことをするでしょう：

d3.json("../data/us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("fill", data ? quantize : null)
      .attr("d", path);
});

d3.json("unemployment.json", function(json) {
  data = json;
  counties.selectAll("path")
      .attr("fill", quantize);
});

function quantize(d) {
  return "hsla(120, 50%, 50%, " + Math.min(8, ~~(data[d.id] * 9 / 12)) + ")";
}

私の関数quantizeはデモンストレーション用の簡単なハックですが、 colorbrewer を見て、変位値を適用するロジックを理解することができます色に。

5
methodofaction

これは、Chrome v16bおよびWindows上のSafari v5.1で機能します： http://phrogz.net/SVG/chloropleth.html

開発ツールを使用してSVGノードをHTMLとしてコピーし、それを空白のドキュメントに貼り付け、2つのCSSファイルへのリンクを追加するだけでした。これはSafariで正しく表示されますか？

編集：これはスタンドアロンのSVGファイルです： http://phrogz.net/SVG/chloropleth.svg
このために、xmlns属性を<svg>および外部リンクに追加しました：

<?xml-stylesheet href="http://mbostock.github.com/d3/ex/choropleth.css" type="text/css"?>
<?xml-stylesheet href="http://mbostock.github.com/d3/ex/colorbrewer.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"><!-- 1MB of data --></svg>

再び、ChromeおよびSafariで動作することが確認されています。

3
Phrogz

「 svg-grabber 」と呼ばれる拡張機能があります（ svgエクスポートは別のオプションです ）試すことができます。拡張機能アイコンをクリックするだけで機能します。これは、stackoverflowの結果ですページ： enter image description here

0
Luis Limas