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

我试图在使用snap.svg的Angular 2中构建一个组件。即使在最简单的情况下，我似乎也无法获得功能性的svg对象。我进口snap.svg在我的index.html像这样...在Angular2组件中使用snap.svg.js

<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服务”，并期待在浏览器的控制台输出，我得到这个运行这个...

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

我意识到这是试图让捕捉加载的野蛮方式，我花了一些时间下载Snapshot和Buildi的加载TypeScript类型的兔子孔ng工厂方法来获取对象，但这一切似乎都是相同的结果。它从控制台输出看起来像它看到我的div好，并初始化myImg罚款，但任何我对myImg调用捕捉方法产生“不是一个函数”错误。花了大部分时间试图画出一个圆圈，我觉得我错过了一些非常愚蠢的东西...感谢您的帮助。

来源

2017-03-13 Jim Scheller

Snap需要一个svg元素，而不是div元素，所以请尝试交换

来源

2017-03-13 19:03:45 Ian

Doh！就是这样，伊恩，谢谢......也许今天我可以做些更重要的事情。 –

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

回答

相关问题