如何在Angular v4.0中使用Snap.svg

发布时间：2020-12-17 07:19:06 所属栏目：安全来源：网络整理

导读：我不知道如何使用带有Angular的snap.svg(使用angular-cli创建).我试图在带有CDN的index.html中调用Snap.svg,通过添加以下内容将其导入组件：import’skapsvg’但我总是收到此消息：未捕获的TypeError：无法读取未定义的属性“on” 任何的想法？编辑进口

我不知道如何使用带有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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!