webpackビルド環境内でsvgファイルをキャンバスにレンダリングする方法は？

Question

svgファイルをキャンバスにレンダリングします。私はウェブパックの設定をしているので、webpackのビルド内にsvgを埋め込むことができると思います。これについて最善の方法は何ですか？

私はキャンバスにsvgをレンダリングするためにjavascriptを使いたいと思います。

Answer 1

file-loaderを使用すると、svgイメージを出力フォルダにコピーできます。あなたのWebPACKの設定はこのようなものであれば

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

var img = new Image(); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 
img.src = require('file!./example.svg'); 

、

... 
output: { 
    path: path.resolve(__dirname, 'dist'), 
    ... 
}, 
... 

は、あなたのSVGファイルはdistのフォルダにコピーされます。