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"
}

}

...当我通过“服务”运行时看看浏览器的控制台输出，我得到了这个......

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的任何快照方法都会产生＆＃34;不是函数＆＃34;错误。早上大部分时间都在试图画一个圆圈，我觉得我错过了一些非常愚蠢的东西......感谢您的帮助。

Answer 1

Snap采用svg元素，而不是div元素，所以尝试交换它。

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

1 个答案: