ionic-frameworkionic2snap.svg

Unable to import snap.svg to ionic2 project


I followed documentation but I am not able to get snap.svg working in my Ionic2 project.

Install:

npm install snapsvg --save
npm install @types/snapsvg --save

Use:

import * as snapsvg from 'snapsvg';
var s = snapsvg.Snap(800,600);

Error:

Uncaught TypeError: Cannot read property 'on' of undefined

Any advices?


Solution

  • 1) Install imports-loader and snap:

    npm i imports-loader
    npm i snapsvg
    npm i @types/snapsvg
    

    2) Create element in html template:

    <svg width="200" height="200" id="svg"></svg>
    

    3) Import it in your component:

    import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';
    

    4) Use it in your component:

     ionViewDidEnter() {
        let s = Snap("#svg");
        let circle = s.circle(50, 50, 100);
        ...
      }