【前端svg插件snap】在vue项目中使用

下载node包

npm install snapsvg --save-devnpm install imports-loader@0.8.0 --save -dev

snap 和imports-loader一起下载才可以在vue中使用

在vue组件中引用

const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

在vue组件中使用

<svg id="svgout" width="100%" height="100%"></svg>注意要用id绑定，使用ref是无法正常渲染出来的this.s = Snap("#svgout");//接下来就可以按照文档操作啦

官网是全英文的，这边放上两个翻译的网站仅供参考

snap中文翻译1
snap中文翻译2