如何在Angular v4.0中使用Snap.svg [英] How to use Snap.svg with Angular v4.0
本文介绍了如何在Angular v4.0中使用Snap.svg的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不知道如何将snap.svg与Angular(使用angular-cli创建)一起使用.我尝试使用CDN在index.html中调用Snap.svg,通过添加以下命令将其导入组件中:import'snapsvg',但我总是收到此消息:
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 :
未捕获的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及其类型:
First install snapsvg and its types:
npm install --save snapsvg
npm install --save @types/snapsvg
第二次在.angular-cli.json
中将snap.svg-min.js
添加到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
然后:
ngOnInit() {
const s = Snap('#my-svg');
const c = s.circle(50, 50, 100);
}
这篇关于如何在Angular v4.0中使用Snap.svg的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文