在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

回答

相關問題