Angular2 구성 요소에서 snap.svg.js 사용

Question

저는 snap.svg를 사용하는 Angular 2로 구성 요소를 작성하려고합니다. 가장 단순한 경우에도 기능적인 SVG 객체를 사용할 수없는 것처럼 보입니다. 때 나는

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

...이처럼 내 index.html을에 snap.svg를 가져 오는거야 ... 그리고 내 구성 요소 코드는 다음과 같습니다 ...

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 

이것을 실행하고 나는 시간을 보냈어요 스냅 및 buildi 용 TypeScript 유형을로드하는 토끼 구멍을 내림 객체를 가져 오는 팩터 리 메서드는 없지만 모두 동일한 결과 인 것으로 보입니다. 콘솔 출력에서 ​​내 div가 잘 보이고 myImg를 잘 초기화하는 것처럼 보이지만 myImg에서 호출하는 모든 스냅 메서드는 "함수가 아닙니다"오류를 발생시킵니다. 대부분의 아침에 서클을 그리는 데 썼다. 나는 정말 바보 같은 것을 놓치고있는 것처럼 느낀다. 어떤 도움을 주셔서 감사합니다.

Answer 1

Snap은 div 요소가 아니라 svg 요소를 취하므로,