[Fabric.js]SVGをcanvasに転写する

最終更新日

fablic

Fabric.jsは、canvasを操作するためのJavascriptライブラリです。
同様のライブラリは多数ありますがFabricの特徴は、内部にSVGパーサーを持ちsvgからcanvasへのインポートおよびcanvasからsvgへのエクスポートを行う機能があります。

注意点としては、svg要素のサイズとcanvas要素のサイズをそろえないと正しいサイズで転写されません。

D3.js & Fabric.js

d3_fablic

Fabric.jsとD3.jsを組み合わせることで、D3.jsで作成した地図(SVG)をcanvasへ転写することもできます。

example

動的に作成したグラフ(SVG)をキャンバスに転写しdata URI schemeとして出力すれば、グラフを画像としてダウンロードする機能なども比較的簡単に作成できます。

……ただ、axis(目盛り)の転写がいまのところ上手くいきません。 orz