I don't know how to use snap.svg with Angular (created with angular-cli). I've tried to call Snap.svg in the index.html with CDN, import it in the component by adding : import 'snapsvg' but I always get this message :
Uncaught TypeError: Cannot read property 'on' of undefined
Any idea ?
EDIT
Import :
import 'snapsvg'
Template :
<svg id="test" width="100%" height="100%" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<path d="M84.403,145.423c65.672,64.179 136.318,0 136.318,0" />
</svg>
In Component :
ngOnInit() {
let s = Snap('#test')
this.path = s.path(this.start)
this.path.animate({
d: this.end
}, 1000, mina.bounce)
}
First install snapsvg and its types:
npm install --save snapsvg
npm install --save @types/snapsvg
Secondly in .angular-cli.json add snap.svg-min.js to scripts:
"scripts": [
"../node_modules/snapsvg/dist/snap.svg-min.js"
]
Now at the top of your component and just after the imports:
declare var Snap: any;
declare var mina: any; // if you want to use animations of course
Then:
ngOnInit() {
const s = Snap('#my-svg');
const c = s.circle(50, 50, 100);
}
Currently there seems to be a bug with using SnapSVG with WebPack (which angular-cli uses). So far the only way I've got this to work is by including the snapsvg.js file as a script in angular-cli.json . Add this to the scripts array as below:
"scripts": [ "node_modules/snapsvg/dist/snap.svg.js"],
You can try using snapsvg-cjs - SnapSVG in CommonJS (for Webpack). Simple googling got me to this demo https://github.com/stevefarwell/angular2-snapsvg-demo (it uses cli and Angular 4)