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

Question

我正在尝试在 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"
}

}

...当我通过 '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 类型以进行 snap 和构建工厂方法来获取对象的兔子洞中，但这一切似乎是一样的结果。从控制台输出看来，我的 div 正常并且初始化 myImg 正常，但是我在 myImg 上调用的任何 snap 方法都会产生 "not a function" 错误。花了一个上午的大部分时间试图画一个圆圈，我觉得我错过了一些非常愚蠢的东西......感谢您的帮助。

Answer 1

Snap 采用 svg 元素，而不是 div 元素，因此请尝试换成那个元素。

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

Using snap.svg.js in Angular2 Component

angular

snap.svg