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 

これを実行すると、私はいくつかの時間を費やしてきましたTypeScript型のスナップとビルドのためのウサギの穴オブジェクトを取得するためのファクトリメソッドはありますが、すべて同じ結果に見えます。コンソール出力からは、私のdivが正常に表示され、myImgは正常に初期化されているように見えますが、myImgを呼び出すスナップ方式では、「関数ではありません」エラーが発生します。午前中にサークルを描こうと思ったのですが、何か本当に愚かなものを逃してしまったような気がします...助けてくれてありがとう

Answer 1

Snapはdiv要素ではなくsvg要素を取ります。