d3天体のライブラリをSVGにエクスポート

Question

私はD3天体ライブラリ（https://github.com/ofrohn/d3-celestial）を使用しており、キャンバス画像をSVGに変換しようとしています（これをベクター画像として使用してGCodeレーザーカッター）。 私はFabric JSライブラリとCanvas-GetSVGを使ってみましたが、成功しませんでした。
誰かがこの作業を開始する簡単な方法はありますか？

<div style="overflow:hidden;"><div id="celestial-map"></div></div> 
<div id="celestial-form"></div> 


<script type="text/javascript"> 
var canvas; 
Celestial.display({ 
    form: true, 
    location: true, 
    datapath: "../data/", 
    stars: {proper: true} 
}); 
document.getElementById("celestial-map").firstChild.setAttribute("id", "findthisstring"); 

function myFunction(){ 
    var canvas = new fabric.Canvas('findthisstring', { isDrawingMode: true }); 
    canvas.isDrawingMode = false; 
    canvas.toSVG(); 
} 
function do_save() { 
    var canvas = new fabric.Canvas('findthisstring', { isDrawingMode: true }); 
    canvas.isDrawingMode = false; 
    var filedata=canvas.toSVG(); // the SVG file is now in filedata 

    var locfile = new Blob([filedata], {type: "image/svg+xml;charset=utf-8"}); 
    var locfilesrc = URL.createObjectURL(locfile);//mylocfile); 

    var dwn = document.getElementById('dwn'); 
    dwn.innerHTML = "<a href=" + locfilesrc + " 
    download='mysvg.svg'>Download</a>"; 
    } 
    </script> 

<button onclick="myFunction()">Click me</button> 
<input type="button" id="saveBtn" value="save" onclick="do_save()"></input> 
<div id='dwn'></div> 
<div id="imgOut"></div> 

私はSVGにCanvasオブジェクトからデータをエクスポートするために、いくつかの異なるライブラリを使用しようとしましたが、唯一の空のSVGsを得ることができました。

Answer 1

Fabric.jsは、ベクトル形式に画素指向<canvas>コンテンツを変換する魔法の弾丸ではありません。 fabric.Canvas方法を使用して描かれた唯一のものは、ベクトル形式にエクスポートすることができます。

それがどのように動作しますか？ Fabric.jsパースペクティブから、Canvasオブジェクトを初期化すると、そのキャンバスは空です。以前に描かれたコンテンツは単に無視されます。 fabric.Canvasオブジェクトがコマンドを与えられた場合、2つの処理が行われます変更は、既存のコンテンツを上書きし、HTML <canvas>要素に描かれており、変更は、データ構造内に記録されています。 SVGへのエクスポート方法は、.toSVG()の方法でのみ使用できます。キャンバス要素自体は書き込み専用の出力デバイスです。

はっきりそれを繰り返す：<canvas>要素にはベクトル情報が含まれていません。どのようなライブラリを使用していても、最適な抽出結果は次のようなものです：

<svg> 
    <image xlink:href="data:image/png;base64....." /> 
</svg> 

データソースはピクセルイメージです。ローカルホスティング

：私は、現時点で手元に詳細を持っていないが、私は（イライラ不完全メイク雑誌の記事から）同じことをやろうとしているとことでSVGを強制することができた

Answer 2

D3-天体

出力をファイルにエクスポートする「SVGクローバ」ブックマークレットをインストール古いバージョン0.4（distのフォルダ内に）実際に使用SVGs

を使用するHTMLページを変更するのインスタンス。