我不知道如何使用带有Angular的snap.svg(使用angular-cli创建).我试图在带有CDN的index.html中调用Snap.svg,通过添加以下内容将其导入组件:import’skapsvg’但我总是收到此消息:
未捕获的TypeError:无法读取未定义的属性“on”
任何的想法 ?
编辑
进口:
import 'snapsvg'
模板:
<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>
在组件中:
ngOnInit() { let s = Snap('#test') this.path = s.path(this.start) this.path.animate({ d: this.end },1000,mina.bounce) }
首先安装snapsvg及其类型:
npm install --save snapsvg npm install --save @types/snapsvg
其次在.angular-cli.json中将snap.svg-min.js添加到脚本中:
"scripts": [ "../node_modules/snapsvg/dist/snap.svg-min.js" ]
现在位于组件的顶部,就在导入之后:
declare var Snap: any; declare var mina: any; // if you want to use animations of course
然后:
ngOnInit() { const s = Snap('#my-svg'); const c = s.circle(50,50,100); }