无法将snap.svg导入ionic2项目

Question

我遵循了文档，但我无法在我的Ionic2项目中使用snap.svg。

安装：

npm install snapsvg --save
npm install @types/snapsvg --save

用途：

import * as snapsvg from 'snapsvg';
var s = snapsvg.Snap(800,600);

错误：

Uncaught TypeError: Cannot read property 'on' of undefined

有什么建议吗？

Answer 1

1）安装导入加载程序和快照：

npm i imports-loader
npm i snapsvg
npm i @types/snapsvg

2）在html模板中创建元素：

<svg width="200" height="200" id="svg"></svg>

3）将其导入您的组件中：

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

4）在你的组件中使用它：

 ionViewDidEnter() {
    let s = Snap("#svg");
    let circle = s.circle(50, 50, 100);
    ...
  }

Answer 2

这就是我在 AngularJS 内部实现初始化的方法，特别是在我的实例中，使用 Ionic Framework 代替通常建议的 webpack 配置调整：

// Imports
declare var require: any;

// Class

  async init() {
    const Snap = await this.loadSnapSvg();
    this.snap = Snap(`#svgElement`);
  }

  private async loadSnapSvg(): Promise<any> {
    const Snap = require('snapsvg-cjs');
    (window as any).Snap = Snap;
    return Snap;
  }

// ...

希望对其他人有帮助。