如何在webpack构建环境中将svg文件呈现到画布？

Question

我想将svg文件渲染到画布。我有一个webpack设置，所以我想我可以将svg嵌入到webpack构建中。最好的方法是什么？

我想使用javascript在画布中渲染svg。

Answer 1

您可以使用file-loader将svg图像复制到输出文件夹。

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');

如果您的webpack配置是这样的，

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

然后你的svg文件将被复制到dist文件夹。