在Angular2组件中使用snap.svg.js

我正在尝试在Angular 2中构建一个使用snap.svg的组件。即使在最简单的情况下，我似乎也无法让功能性svg对象工作。我正在我的index.html中导入snap.svg，如下所示

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

declare var Snap: any;

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-foo',
  template: `<div id=my_svg style="width:375px;height:667px%;"></div>`,
})

export class FooComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log("ngOnInit()");
    console.log( document.getElementById( "my_svg" ) );
    console.log( Snap );

    var myImg:any = Snap( "#my_svg" );

    console.log( myImg );

    myImg.circle( 50, 50, 45 );   // Fails here with "circle not a function"
}

}

…我的组件代码如下所示

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

declare var Snap: any;

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-foo',
  template: `<div id=my_svg style="width:375px;height:667px%;"></div>`,
})

export class FooComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log("ngOnInit()");
    console.log( document.getElementById( "my_svg" ) );
    console.log( Snap );

    var myImg:any = Snap( "#my_svg" );

    console.log( myImg );

    myImg.circle( 50, 50, 45 );   // Fails here with "circle not a function"
}

}

…当我通过“ng serve”运行此程序并查看浏览器的控制台输出时，我得到了以下结果

ngOnInit()
foo.component.ts:21 <div id=​"my_svg" style=​"width:​375px;​height:​667px%;​">​</div>​
foo.component.ts:22 Snap v0.4.0
foo.component.ts:26 s {node: div#my_svg, type: "DIV", id: "DIVSj08g87j50", anims: Object, _: Object}
error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: myImg.circle is not a function
Error: Error in :0:0 caused by: myImg.circle is not a function

---

我意识到这是一种野蛮的尝试加载快照的方法，我花了一些时间在为snap加载TypeScript类型和构建工厂方法来获取对象的过程中，但结果似乎是一样的。从控制台输出看，我的div正常，初始化myImg也很好，但是我对myImg调用的任何snap方法都不会产生函数错误。花了一上午的大部分时间试图画一个圆圈，我觉得我错过了一些非常愚蠢的事情。。。谢谢您的帮助。

Snap使用svg元素，而不是div元素，所以请尝试切换到该元素。

Doh！就这样，伊恩。谢谢也许我今天能做些更重要的事。