CODEWITHSUNDEEP
angularsnap.svg
James Scheller
James Scheller

Reputation: 245

Using snap.svg.js in Angular2 Component

I'm trying to build a component in Angular 2 that makes use of snap.svg. I seem incapable of getting a functional svg object to work even in the most simple of cases. I'm importing snap.svg in my index.html like this...

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

...and my component code looks like this...

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

}

...and when I run this via 'ng serve' and look at the browser's console output, I'm getting this...

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

I realize this is a brutish way to try to get snap loaded and I've spent some time down the rabbit holes of loading TypeScript types for snap and building a factory method to get the object, but it all seems to be the same result. It looks from the console output like it's seeing my div okay and initializing myImg fine, but any snap method I call on myImg yields that "not a function" error. Having spent most of the morning trying to draw a circle, I feel like I"m missing something really dumb... Thanks for any help.

Upvotes: 0

Views: 885

Answers (1)

Ian
Ian

Reputation: 13852

Snap takes an svg element, not a div element, so try swapping to that.

Upvotes: 1

Related Questions