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

Question

我不知道如何将 snap.svg 与 Angular 一起使用（使用 angular-cli 创建）。我尝试使用 CDN 在 index.html 中调用 Snap.svg，通过添加将其导入组件：import 'snapsvg' 但我总是收到此消息：

未捕获类型错误：无法读取未定义的属性'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)
  }

Answer 1

目前似乎 a bug 将 SnapSVG 与 WebPack 一起使用（angular-cli 使用）。到目前为止，我让它工作的唯一方法是将 snapsvg.js 文件作为脚本包含在 angular-cli.json 中。将其添加到脚本数组中，如下所示：

"scripts": [ "node_modules/snapsvg/dist/snap.svg.js"],

Answer 2

您可以尝试使用 snapsvg-cjs - SnapSVG in CommonJS (for Webpack). Simple googling got me to this demo https://github.com/stevefarwell/angular2-snapsvg-demo（它使用 cli 和 Angular 4）

Answer 3

1) 安装 imports-loader 和 snap:

npm i imports-loader

2) 使用imports-load导入：

import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';

Answer 4

首先安装 snapsvg 及其类型：

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"
]

现在位于组件的顶部，紧跟在导入之后：

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

How to use Snap.svg with Angular v4.0

angular

snap.svg