No sé cómo usar snap.svg con Angular (creado con angular-cli). Intenté llamar a Snap.svg en index.html con CDN, importarlo en el componente agregando: import 'snapsvg' pero siempre recibo este mensaje:
TypeError no capturado: no se puede leer la propiedad 'on' de indefinido
Alguna idea ?
EDITAR
Importar :
import 'snapsvg'Modelo :
<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>En componente:
ngOnInit() { let s = Snap('#test') this.path = s.path(this.start) this.path.animate({ d: this.end }, 1000, mina.bounce) }Primero instale snapsvg y sus tipos:
npm install --save snapsvg npm install --save @types/snapsvg En segundo lugar, en .angular-cli.json agregue snap.svg-min.js a los scripts :
"scripts": [ "../node_modules/snapsvg/dist/snap.svg-min.js" ]Ahora en la parte superior de su componente y justo después de las importaciones:
declare var Snap: any; declare var mina: any; // if you want to use animations of courseDespués:
ngOnInit() { const s = Snap('#my-svg'); const c = s.circle(50, 50, 100); }Actualmente parece haber un error al usar SnapSVG con WebPack (que usa angular-cli). Hasta ahora, la única forma en que tengo esto funcionando es incluyendo el archivo snapsvg.js como un script en angular-cli.json. Agregue esto a la matriz de scripts como se muestra a continuación:
"scripts": [ "node_modules/snapsvg/dist/snap.svg.js"],Puede intentar usar snapsvg-cjs - SnapSVG en CommonJS (para Webpack). Una simple búsqueda en Google me llevó a esta demostración https://github.com/stevefarwell/angular2-snapsvg-demo (usa cli y Angular 4)