Question

我不知道如何将snap.svg与Angular一起使用（使用angular-cli创建）。我尝试使用CDN在index.html中调用Snap.svg，通过添加以下内容将其导入组件：import＆＃39; snapsvg＆＃39;但我总是得到这样的信息：

未捕获的TypeError：无法读取属性＆＃39; on＆＃39;未定义的

有什么想法吗？

修改

导入：

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

首先安装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);
}

Answer 2

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

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

Answer 3

您可以尝试在CommonJS中使用snapsvg-cjs - SnapSVG（对于Webpack）。简单的谷歌搜索让我参加了这个演示https://github.com/stevefarwell/angular2-snapsvg-demo（它使用cli和Angular 4）

Answer 4

1）安装imports-loader和snap：

npm i imports-loader

2）使用import-load导入：

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

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

4 个答案: